优化脚本编辑样式

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:flutter/cupertino.dart';
import 'package:code_text_field/code_text_field.dart';
import 'package:flutter/material.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/http.dart';
import 'package:qinglong_app/base/ql_app_bar.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:google_fonts/google_fonts.dart';
import '../../base/ui/syntax_highlighter.dart';
class ConfigEditPage extends ConsumerStatefulWidget {
final String content;
@@ -25,37 +19,38 @@ class ConfigEditPage extends ConsumerStatefulWidget {
}
class _ConfigEditPageState extends ConsumerState<ConfigEditPage> {
String text = "";
String pre_text = "";
CodeController? _codeController;
late String result;
@override
void dispose() {
_codeController?.dispose();
super.dispose();
}
@override
void initState() {
result = widget.content;
super.initState();
text = widget.content;
pre_text = widget.content;
}
void replaceText(String oldText, String newText) {
pre_text = text;
if (oldText.isEmpty) {
text = text + newText;
} else {
if (text.contains(oldText)) {
text = text.replaceAll(oldText, newText);
}
}
setState(() {});
}
void clearText() {
pre_text = text;
text = "";
setState(() {});
WidgetsBinding.instance?.addPostFrameCallback((timeStamp) {
focusNode.requestFocus();
});
}
@override
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(
appBar: QlAppBar(
canBack: true,
@@ -66,11 +61,9 @@ class _ConfigEditPageState extends ConsumerState<ConfigEditPage> {
actions: [
InkWell(
onTap: () async {
HttpResponse<NullResponse> response =
await Api.saveFile(widget.title, text);
HttpResponse<NullResponse> response = await Api.saveFile(widget.title, result);
if (response.success) {
"提交成功".toast();
ref.read(configProvider).loadContent(widget.title);
Navigator.of(context).pop(widget.title);
} else {
(response.message ?? "").toast();
@@ -93,234 +86,16 @@ class _ConfigEditPageState extends ConsumerState<ConfigEditPage> {
)
],
),
body: Column(
children: [
Padding(
padding: const EdgeInsets.symmetric(
vertical: 10,
),
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,),
),
],
body: SafeArea(
top: false,
child: CodeField(
controller: _codeController!,
expands: true,
background: ref.watch(themeProvider).themeColor.settingBgColor(),
),
),
);
}
void edit(String title, String oldDesc, String newDesc) {
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);
},
),
],
),
);
}
FocusNode focusNode = FocusNode();
}

View File

@@ -1,10 +1,12 @@
import 'package:code_text_field/code_text_field.dart';
import 'package:flutter/material.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/http.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/module/config/config_viewmodel.dart';
import 'package:qinglong_app/utils/extension.dart';
class ScriptEditPage extends ConsumerStatefulWidget {
@@ -19,22 +21,40 @@ class ScriptEditPage extends ConsumerStatefulWidget {
}
class _ScriptEditPageState extends ConsumerState<ScriptEditPage> {
late TextEditingController _controller;
FocusNode node = FocusNode();
CodeController? _codeController;
late String result;
FocusNode focusNode = FocusNode();
@override
void dispose() {
_codeController?.dispose();
super.dispose();
}
@override
void initState() {
_controller = TextEditingController(text: widget.content);
result = widget.content;
super.initState();
WidgetsBinding.instance?.addPostFrameCallback(
(timeStamp) {
node.requestFocus();
},
);
WidgetsBinding.instance?.addPostFrameCallback((timeStamp) {
focusNode.requestFocus();
});
}
@override
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(
appBar: QlAppBar(
canBack: true,
@@ -45,7 +65,7 @@ class _ScriptEditPageState extends ConsumerState<ScriptEditPage> {
actions: [
InkWell(
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) {
"提交成功".toast();
Navigator.of(context).pop(true);
@@ -70,22 +90,12 @@ class _ScriptEditPageState extends ConsumerState<ScriptEditPage> {
)
],
),
body: Container(
padding: const EdgeInsets.only(
left: 15,
right: 15,
),
child: SingleChildScrollView(
child: TextField(
focusNode: node,
style: TextStyle(
color: ref.read(themeProvider).themeColor.descColor(),
fontSize: 14,
),
controller: _controller,
minLines: 1,
maxLines: 100,
),
body: SafeArea(
top: false,
child: CodeField(
controller: _codeController!,
expands: true,
background: ref.watch(themeProvider).themeColor.settingBgColor(),
),
),
);

File diff suppressed because it is too large Load Diff

View File

@@ -34,6 +34,7 @@ dependencies:
url_launcher: ^6.0.20
flutter_colorpicker: ^1.0.3
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 change_app_package_name:main work.master.qinglongapp