优化脚本编辑样式

This commit is contained in:
jyuesong
2022-05-27 08:40:13 +08:00
parent 598c0cbde4
commit ec3440a0fb
4 changed files with 260 additions and 453 deletions

View File

@@ -1,18 +1,12 @@
import 'dart:ui'; import 'package:code_text_field/code_text_field.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:highlight/languages/powershell.dart';
import 'package:qinglong_app/base/http/api.dart'; import 'package:qinglong_app/base/http/api.dart';
import 'package:qinglong_app/base/http/http.dart'; import 'package:qinglong_app/base/http/http.dart';
import 'package:qinglong_app/base/ql_app_bar.dart'; import 'package:qinglong_app/base/ql_app_bar.dart';
import 'package:qinglong_app/base/theme.dart'; import 'package:qinglong_app/base/theme.dart';
import 'package:qinglong_app/module/config/config_page.dart';
import 'package:qinglong_app/module/config/config_viewmodel.dart';
import 'package:qinglong_app/utils/extension.dart'; import 'package:qinglong_app/utils/extension.dart';
import 'package:google_fonts/google_fonts.dart';
import '../../base/ui/syntax_highlighter.dart';
class ConfigEditPage extends ConsumerStatefulWidget { class ConfigEditPage extends ConsumerStatefulWidget {
final String content; final String content;
@@ -25,37 +19,38 @@ class ConfigEditPage extends ConsumerStatefulWidget {
} }
class _ConfigEditPageState extends ConsumerState<ConfigEditPage> { class _ConfigEditPageState extends ConsumerState<ConfigEditPage> {
String text = ""; CodeController? _codeController;
String pre_text = ""; late String result;
@override
void dispose() {
_codeController?.dispose();
super.dispose();
}
@override @override
void initState() { void initState() {
result = widget.content;
super.initState(); super.initState();
text = widget.content;
pre_text = widget.content;
}
void replaceText(String oldText, String newText) { WidgetsBinding.instance?.addPostFrameCallback((timeStamp) {
pre_text = text; focusNode.requestFocus();
});
if (oldText.isEmpty) {
text = text + newText;
} else {
if (text.contains(oldText)) {
text = text.replaceAll(oldText, newText);
}
}
setState(() {});
}
void clearText() {
pre_text = text;
text = "";
setState(() {});
} }
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
_codeController ??= CodeController(
text: widget.content,
language: powershell,
onChange: (value) {
result = value;
},
theme: ref.watch(themeProvider).themeColor.codeEditorTheme(),
stringMap: {
"export": const TextStyle(fontWeight: FontWeight.normal, color: Color(0xff6B2375)),
},
);
return Scaffold( return Scaffold(
appBar: QlAppBar( appBar: QlAppBar(
canBack: true, canBack: true,
@@ -66,11 +61,9 @@ class _ConfigEditPageState extends ConsumerState<ConfigEditPage> {
actions: [ actions: [
InkWell( InkWell(
onTap: () async { onTap: () async {
HttpResponse<NullResponse> response = HttpResponse<NullResponse> response = await Api.saveFile(widget.title, result);
await Api.saveFile(widget.title, text);
if (response.success) { if (response.success) {
"提交成功".toast(); "提交成功".toast();
ref.read(configProvider).loadContent(widget.title);
Navigator.of(context).pop(widget.title); Navigator.of(context).pop(widget.title);
} else { } else {
(response.message ?? "").toast(); (response.message ?? "").toast();
@@ -93,234 +86,16 @@ class _ConfigEditPageState extends ConsumerState<ConfigEditPage> {
) )
], ],
), ),
body: Column( body: SafeArea(
children: [ top: false,
Padding( child: CodeField(
padding: const EdgeInsets.symmetric( controller: _codeController!,
vertical: 10, expands: true,
), background: ref.watch(themeProvider).themeColor.settingBgColor(),
child: SizedBox( ),
height: 30,
child: ListView(
padding: EdgeInsets.symmetric(
horizontal: 15,
),
scrollDirection: Axis.horizontal,
children: [
GestureDetector(
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 5,
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
border: Border.all(
color: ref.watch(themeProvider).primaryColor,
width: 1),
),
child: Text(
"插入",
style: TextStyle(
color: ref.watch(themeProvider).primaryColor,
fontSize: 16,
),
),
),
onTap: () {
edit("插入内容", "", "请输入插入的内容,换行符自己添加");
},
behavior: HitTestBehavior.opaque,
),
const SizedBox(
width: 15,
),
GestureDetector(
onTap: () {
edit("替换内容", "原内容", "新内容");
},
behavior: HitTestBehavior.opaque,
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 5,
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
border: Border.all(
color: ref.watch(themeProvider).primaryColor,
width: 1),
),
child: Text(
"替换",
style: TextStyle(
color: ref.watch(themeProvider).primaryColor,
fontSize: 16,
),
),
),
),
const SizedBox(
width: 15,
),
GestureDetector(
onTap: () {
edit("删除内容", "输入要删除的内容", "");
},
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 5,
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
border: Border.all(
color: ref.watch(themeProvider).primaryColor,
width: 1),
),
child: Text(
"删除",
style: TextStyle(
color: ref.watch(themeProvider).primaryColor,
fontSize: 16,
),
),
),
),
const SizedBox(
width: 15,
),
GestureDetector(
onTap: () {
clearText();
},
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 5,
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
border: Border.all(
color: ref.watch(themeProvider).primaryColor,
width: 1),
),
child: Text(
"清空",
style: TextStyle(
color: ref.watch(themeProvider).primaryColor,
fontSize: 16,
),
),
),
),
const SizedBox(
width: 15,
),
GestureDetector(
onTap: () {
text = pre_text;
setState(() {});
},
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 5,
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
border: Border.all(
color: ref.watch(themeProvider).primaryColor,
width: 1),
),
child: Text(
"撤销本次操作",
style: TextStyle(
color: ref.watch(themeProvider).primaryColor,
fontSize: 16,
),
),
),
),
],
),
),
),
Expanded(
child: CodeWidget(content: text,),
),
],
), ),
); );
} }
void edit(String title, String oldDesc, String newDesc) { FocusNode focusNode = FocusNode();
String oldText = "";
String newText = "";
showCupertinoDialog(
context: context,
builder: (_) => CupertinoAlertDialog(
title: Text(title),
content: Column(
mainAxisSize: MainAxisSize.min,
children: [
oldDesc.isNotEmpty
? Material(
color: Colors.transparent,
child: TextField(
onChanged: (value) {
oldText = value;
},
maxLines: 3,
minLines: 1,
decoration: InputDecoration(
contentPadding: const EdgeInsets.fromLTRB(0, 5, 0, 5),
hintText: oldDesc,
),
autofocus: true,
),
)
: const SizedBox.shrink(),
newDesc.isNotEmpty
? Material(
color: Colors.transparent,
child: TextField(
onChanged: (value) {
newText = value;
},
maxLines: 3,
minLines: 1,
decoration: InputDecoration(
contentPadding: const EdgeInsets.fromLTRB(0, 5, 0, 5),
hintText: newDesc,
),
autofocus: true,
),
)
: const SizedBox.shrink(),
],
),
actions: [
CupertinoDialogAction(
child: const Text(
"取消",
style: TextStyle(
color: Color(0xff999999),
),
),
onPressed: () {
Navigator.of(context).pop();
},
),
CupertinoDialogAction(
child: Text(
"确定",
style: TextStyle(
color: ref.watch(themeProvider).primaryColor,
),
),
onPressed: () async {
Navigator.of(context).pop(true);
replaceText(oldText, newText);
},
),
],
),
);
}
} }

View File

@@ -1,10 +1,12 @@
import 'package:code_text_field/code_text_field.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:highlight/languages/javascript.dart';
import 'package:qinglong_app/base/http/api.dart'; import 'package:qinglong_app/base/http/api.dart';
import 'package:qinglong_app/base/http/http.dart'; import 'package:qinglong_app/base/http/http.dart';
import 'package:qinglong_app/base/ql_app_bar.dart'; import 'package:qinglong_app/base/ql_app_bar.dart';
import 'package:qinglong_app/base/single_account_page.dart';
import 'package:qinglong_app/base/theme.dart'; import 'package:qinglong_app/base/theme.dart';
import 'package:qinglong_app/module/config/config_viewmodel.dart';
import 'package:qinglong_app/utils/extension.dart'; import 'package:qinglong_app/utils/extension.dart';
class ScriptEditPage extends ConsumerStatefulWidget { class ScriptEditPage extends ConsumerStatefulWidget {
@@ -19,22 +21,40 @@ class ScriptEditPage extends ConsumerStatefulWidget {
} }
class _ScriptEditPageState extends ConsumerState<ScriptEditPage> { class _ScriptEditPageState extends ConsumerState<ScriptEditPage> {
late TextEditingController _controller; CodeController? _codeController;
FocusNode node = FocusNode(); late String result;
FocusNode focusNode = FocusNode();
@override
void dispose() {
_codeController?.dispose();
super.dispose();
}
@override @override
void initState() { void initState() {
_controller = TextEditingController(text: widget.content); result = widget.content;
super.initState(); super.initState();
WidgetsBinding.instance?.addPostFrameCallback(
(timeStamp) { WidgetsBinding.instance?.addPostFrameCallback((timeStamp) {
node.requestFocus(); focusNode.requestFocus();
}, });
);
} }
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
_codeController ??= CodeController(
text: widget.content,
language: javascript,
onChange: (value) {
result = value;
},
theme: ref.watch(themeProvider).themeColor.codeEditorTheme(),
stringMap: {
"export": const TextStyle(fontWeight: FontWeight.normal, color: Color(0xff6B2375)),
},
);
return Scaffold( return Scaffold(
appBar: QlAppBar( appBar: QlAppBar(
canBack: true, canBack: true,
@@ -45,7 +65,7 @@ class _ScriptEditPageState extends ConsumerState<ScriptEditPage> {
actions: [ actions: [
InkWell( InkWell(
onTap: () async { onTap: () async {
HttpResponse<NullResponse> response = await Api.updateScript(widget.title, widget.path, _controller.text); HttpResponse<NullResponse> response = await Api.updateScript(widget.title, widget.path, result);
if (response.success) { if (response.success) {
"提交成功".toast(); "提交成功".toast();
Navigator.of(context).pop(true); Navigator.of(context).pop(true);
@@ -70,22 +90,12 @@ class _ScriptEditPageState extends ConsumerState<ScriptEditPage> {
) )
], ],
), ),
body: Container( body: SafeArea(
padding: const EdgeInsets.only( top: false,
left: 15, child: CodeField(
right: 15, controller: _codeController!,
), expands: true,
child: SingleChildScrollView( background: ref.watch(themeProvider).themeColor.settingBgColor(),
child: TextField(
focusNode: node,
style: TextStyle(
color: ref.read(themeProvider).themeColor.descColor(),
fontSize: 14,
),
controller: _controller,
minLines: 1,
maxLines: 100,
),
), ),
), ),
); );

File diff suppressed because it is too large Load Diff

View File

@@ -34,6 +34,7 @@ dependencies:
url_launcher: ^6.0.20 url_launcher: ^6.0.20
flutter_colorpicker: ^1.0.3 flutter_colorpicker: ^1.0.3
widget_with_codeview: ^2.0.1+2 widget_with_codeview: ^2.0.1+2
code_text_field: ^1.0.2
# flutter pub run build_runner build --delete-conflicting-outputs # flutter pub run build_runner build --delete-conflicting-outputs
# flutter pub run change_app_package_name:main work.master.qinglongapp # flutter pub run change_app_package_name:main work.master.qinglongapp