This commit is contained in:
NewTab
2022-01-21 20:26:42 +08:00
parent 8c0a5bbb24
commit cb484eeb95
2 changed files with 336 additions and 323 deletions

View File

@@ -5,6 +5,7 @@ import 'package:qinglong_app/base/base_state_widget.dart';
import 'package:qinglong_app/base/routes.dart'; import 'package:qinglong_app/base/routes.dart';
import 'package:qinglong_app/base/theme.dart'; import 'package:qinglong_app/base/theme.dart';
import 'package:qinglong_app/base/ui/abs_underline_tabindicator.dart'; import 'package:qinglong_app/base/ui/abs_underline_tabindicator.dart';
import 'package:qinglong_app/base/ui/empty_widget.dart';
import 'package:qinglong_app/main.dart'; import 'package:qinglong_app/main.dart';
import 'config_viewmodel.dart'; import 'config_viewmodel.dart';
@@ -16,7 +17,8 @@ class ConfigPage extends StatefulWidget {
ConfigPageState createState() => ConfigPageState(); ConfigPageState createState() => ConfigPageState();
} }
class ConfigPageState extends State<ConfigPage> with SingleTickerProviderStateMixin { class ConfigPageState extends State<ConfigPage>
with SingleTickerProviderStateMixin {
TabController? _tabController; TabController? _tabController;
@override @override
@@ -28,7 +30,11 @@ class ConfigPageState extends State<ConfigPage> with SingleTickerProviderStateMi
Widget build(BuildContext context) { Widget build(BuildContext context) {
return BaseStateWidget<ConfigViewModel>( return BaseStateWidget<ConfigViewModel>(
builder: (ref, model, child) { builder: (ref, model, child) {
_tabController ??= TabController(length: model.list.length, vsync: this); if (model.list.isEmpty) {
return const EmptyWidget();
}
_tabController ??=
TabController(length: model.list.length, vsync: this);
return Column( return Column(
children: [ children: [
@@ -60,7 +66,10 @@ class ConfigPageState extends State<ConfigPage> with SingleTickerProviderStateMi
padding: const EdgeInsets.symmetric( padding: const EdgeInsets.symmetric(
horizontal: 15, horizontal: 15,
), ),
theme: ref.watch(themeProvider).themeColor.codeEditorTheme(), theme: ref
.watch(themeProvider)
.themeColor
.codeEditorTheme(),
tabSize: 14, tabSize: 14,
), ),
), ),
@@ -82,7 +91,8 @@ class ConfigPageState extends State<ConfigPage> with SingleTickerProviderStateMi
if (_tabController == null || _tabController!.length == 0) return; if (_tabController == null || _tabController!.length == 0) return;
navigatorState.currentState?.pushNamed(Routes.routeConfigEdit, arguments: { navigatorState.currentState?.pushNamed(Routes.routeConfigEdit, arguments: {
"title": ref.read(configProvider).list[_tabController?.index ?? 0].title, "title": ref.read(configProvider).list[_tabController?.index ?? 0].title,
"content": ref.read(configProvider).content[ref.read(configProvider).list[_tabController?.index ?? 0].title] "content": ref.read(configProvider).content[
ref.read(configProvider).list[_tabController?.index ?? 0].title]
}).then((value) async { }).then((value) async {
if (value != null && (value as String).isNotEmpty) { if (value != null && (value as String).isNotEmpty) {
await ref.read(configProvider).loadContent(value); await ref.read(configProvider).loadContent(value);

View File

@@ -75,366 +75,369 @@ class _ThemePageState extends ConsumerState<ThemePage> {
) )
], ],
), ),
body: Column( body: SafeArea(
children: [ bottom: true,
const SizedBox( child: Column(
height: 15, children: [
), const SizedBox(
Expanded( height: 15,
child: SizedBox( ),
height: Expanded(
MediaQuery.of(context).size.height * 3 / 4 - kToolbarHeight, child: SizedBox(
child: Row( height:
children: [ MediaQuery.of(context).size.height * 3 / 4 - kToolbarHeight,
const SizedBox( child: Row(
width: 20, children: [
), const SizedBox(
Expanded( width: 20,
child: ClipRRect( ),
borderRadius: BorderRadius.circular(15), Expanded(
child: Scaffold( child: ClipRRect(
appBar: AppBar( borderRadius: BorderRadius.circular(15),
backgroundColor: _primaryColor, child: Scaffold(
title: Text("示例页面"), appBar: AppBar(
elevation: 0, backgroundColor: _primaryColor,
automaticallyImplyLeading: false, title: Text("示例页面"),
centerTitle: true, elevation: 0,
), automaticallyImplyLeading: false,
body: ListView.builder( centerTitle: true,
itemBuilder: (context, index) { ),
return Column( body: ListView.builder(
mainAxisSize: MainAxisSize.min, itemBuilder: (context, index) {
crossAxisAlignment: CrossAxisAlignment.start, return Column(
children: [ mainAxisSize: MainAxisSize.min,
Container( crossAxisAlignment: CrossAxisAlignment.start,
width: MediaQuery.of(context).size.width, children: [
color: index == 0 Container(
? ref width: MediaQuery.of(context).size.width,
.watch(themeProvider) color: index == 0
.themeColor ? ref
.pinColor() .watch(themeProvider)
: Colors.transparent, .themeColor
padding: const EdgeInsets.symmetric( .pinColor()
horizontal: 15, : Colors.transparent,
vertical: 8, padding: const EdgeInsets.symmetric(
), horizontal: 15,
child: Column( vertical: 8,
mainAxisSize: MainAxisSize.min, ),
mainAxisAlignment: MainAxisAlignment.start, child: Column(
crossAxisAlignment: mainAxisSize: MainAxisSize.min,
CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.start,
children: [ crossAxisAlignment:
Row( CrossAxisAlignment.start,
mainAxisAlignment: children: [
MainAxisAlignment.start, Row(
children: [ mainAxisAlignment:
Expanded( MainAxisAlignment.start,
child: Row( children: [
mainAxisSize: MainAxisSize.max, Expanded(
mainAxisAlignment: child: Row(
MainAxisAlignment.start, mainAxisSize: MainAxisSize.max,
children: [ mainAxisAlignment:
Random().nextBool() MainAxisAlignment.start,
? const SizedBox.shrink() children: [
: SizedBox( Random().nextBool()
width: 15, ? const SizedBox.shrink()
height: 15, : SizedBox(
child: width: 15,
CircularProgressIndicator( height: 15,
strokeWidth: 2, child:
color: _primaryColor, CircularProgressIndicator(
strokeWidth: 2,
color: _primaryColor,
),
),
SizedBox(
width: Random().nextBool()
? 0
: 5,
),
Expanded(
child: Material(
color: Colors.transparent,
child: Text(
"示例名称",
maxLines: 1,
overflow:
TextOverflow.ellipsis,
style: TextStyle(
overflow: TextOverflow
.ellipsis,
color: ref
.watch(
themeProvider)
.themeColor
.titleColor(),
fontSize: 18,
), ),
),
SizedBox(
width: Random().nextBool()
? 0
: 5,
),
Expanded(
child: Material(
color: Colors.transparent,
child: Text(
"示例名称",
maxLines: 1,
overflow:
TextOverflow.ellipsis,
style: TextStyle(
overflow: TextOverflow
.ellipsis,
color: ref
.watch(
themeProvider)
.themeColor
.titleColor(),
fontSize: 18,
), ),
), ),
), ),
],
),
),
Material(
color: Colors.transparent,
child: Text(
"上午1000",
maxLines: 1,
style: TextStyle(
overflow: TextOverflow.ellipsis,
color: ref
.watch(themeProvider)
.themeColor
.descColor(),
fontSize: 12,
), ),
],
),
),
Material(
color: Colors.transparent,
child: Text(
"上午1000",
maxLines: 1,
style: TextStyle(
overflow: TextOverflow.ellipsis,
color: ref
.watch(themeProvider)
.themeColor
.descColor(),
fontSize: 12,
), ),
), ),
), ],
], ),
), const SizedBox(
const SizedBox( height: 8,
height: 8, ),
), Row(
Row( crossAxisAlignment:
crossAxisAlignment: CrossAxisAlignment.start,
CrossAxisAlignment.start, children: [
children: [ Random().nextBool()
Random().nextBool() ? const Icon(
? const Icon( Icons.dnd_forwardslash,
Icons.dnd_forwardslash, size: 12,
size: 12, color: Colors.red,
color: Colors.red, )
) : const SizedBox.shrink(),
: const SizedBox.shrink(), const SizedBox(
const SizedBox( width: 5,
width: 5, ),
), Material(
Material( color: Colors.transparent,
color: Colors.transparent, child: Text(
child: Text( "10 1-12/2 * * *",
"10 1-12/2 * * *", maxLines: 1,
maxLines: 1, style: TextStyle(
style: TextStyle( overflow: TextOverflow.ellipsis,
overflow: TextOverflow.ellipsis, color: ref
color: ref .watch(themeProvider)
.watch(themeProvider) .themeColor
.themeColor .descColor(),
.descColor(), fontSize: 12,
fontSize: 12, ),
), ),
), ),
), ],
], ),
), const SizedBox(
const SizedBox( height: 8,
height: 8, ),
), Material(
Material( color: Colors.transparent,
color: Colors.transparent, child: Text(
child: Text( "task raw post.js",
"task raw post.js", maxLines: 1,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
color: ref style: TextStyle(
.watch(themeProvider) overflow: TextOverflow.ellipsis,
.themeColor color: ref
.descColor(), .watch(themeProvider)
fontSize: 12, .themeColor
.descColor(),
fontSize: 12,
),
), ),
), ),
), ],
], ),
), ),
), const Divider(
const Divider( height: 1,
height: 1, indent: 15,
indent: 15, ),
), ],
], );
); },
}, itemCount: 100,
itemCount: 100, ),
), ),
), ),
), ),
), const SizedBox(
const SizedBox( width: 20,
width: 20, ),
), ],
], ),
), ),
), ),
), const SizedBox(
const SizedBox( height: 15,
height: 15,
),
Container(
margin: const EdgeInsets.symmetric(
horizontal: 15,
), ),
height: colorHeight + 20, Container(
padding: const EdgeInsets.symmetric(vertical: 10), margin: const EdgeInsets.symmetric(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
),
child: ListView.separated(
physics: BouncingScrollPhysics(),
padding: const EdgeInsets.symmetric(
horizontal: 15, horizontal: 15,
), ),
scrollDirection: Axis.horizontal, height: colorHeight + 20,
itemBuilder: (context, index) { padding: const EdgeInsets.symmetric(vertical: 10),
if (index == 0) { decoration: BoxDecoration(
return GestureDetector( color: Colors.white,
behavior: HitTestBehavior.opaque, borderRadius: BorderRadius.circular(20),
onTap: () { ),
pickColor(); child: ListView.separated(
}, physics: BouncingScrollPhysics(),
child: SizedBox( padding: const EdgeInsets.symmetric(
width: colorHeight, horizontal: 15,
height: colorHeight, ),
child: Stack( scrollDirection: Axis.horizontal,
children: [ itemBuilder: (context, index) {
Positioned( if (index == 0) {
child: Container( return GestureDetector(
width: smallColorHeight, behavior: HitTestBehavior.opaque,
height: smallColorHeight, onTap: () {
decoration: BoxDecoration( pickColor();
color: colors[0], },
borderRadius: child: SizedBox(
BorderRadius.circular(smallColorHeight), width: colorHeight,
height: colorHeight,
child: Stack(
children: [
Positioned(
child: Container(
width: smallColorHeight,
height: smallColorHeight,
decoration: BoxDecoration(
color: colors[0],
borderRadius:
BorderRadius.circular(smallColorHeight),
),
), ),
left: 0,
top: colorHeight / 4 - smallColorHeight / 2,
), ),
left: 0, Positioned(
top: colorHeight / 4 - smallColorHeight / 2, child: Container(
), width: smallColorHeight,
Positioned( height: smallColorHeight,
child: Container( decoration: BoxDecoration(
width: smallColorHeight, color: colors[1],
height: smallColorHeight, borderRadius:
decoration: BoxDecoration( BorderRadius.circular(smallColorHeight),
color: colors[1], ),
borderRadius:
BorderRadius.circular(smallColorHeight),
), ),
left: 0,
bottom: colorHeight / 4 - smallColorHeight / 2,
), ),
left: 0, Positioned(
bottom: colorHeight / 4 - smallColorHeight / 2, child: Container(
), width: smallColorHeight,
Positioned( height: smallColorHeight,
child: Container( decoration: BoxDecoration(
width: smallColorHeight, color: colors[2],
height: smallColorHeight, borderRadius:
decoration: BoxDecoration( BorderRadius.circular(smallColorHeight),
color: colors[2], ),
borderRadius:
BorderRadius.circular(smallColorHeight),
), ),
left: colorHeight / 2 - smallColorHeight / 2,
top: 0,
), ),
left: colorHeight / 2 - smallColorHeight / 2, Positioned(
top: 0, child: Container(
), width: smallColorHeight,
Positioned( height: smallColorHeight,
child: Container( decoration: BoxDecoration(
width: smallColorHeight, color: colors[3],
height: smallColorHeight, borderRadius:
decoration: BoxDecoration( BorderRadius.circular(smallColorHeight),
color: colors[3], ),
borderRadius:
BorderRadius.circular(smallColorHeight),
), ),
right: 0,
top: colorHeight / 4 - smallColorHeight / 2,
), ),
right: 0, Positioned(
top: colorHeight / 4 - smallColorHeight / 2, child: Container(
), width: smallColorHeight,
Positioned( height: smallColorHeight,
child: Container( decoration: BoxDecoration(
width: smallColorHeight, color: colors[4],
height: smallColorHeight, borderRadius:
decoration: BoxDecoration( BorderRadius.circular(smallColorHeight),
color: colors[4], ),
borderRadius:
BorderRadius.circular(smallColorHeight),
), ),
right: 0,
bottom: colorHeight / 4 - smallColorHeight / 2,
), ),
right: 0, Positioned(
bottom: colorHeight / 4 - smallColorHeight / 2, child: Container(
), width: smallColorHeight,
Positioned( height: smallColorHeight,
child: Container( decoration: BoxDecoration(
width: smallColorHeight, color: colors[5],
height: smallColorHeight, borderRadius:
decoration: BoxDecoration( BorderRadius.circular(smallColorHeight),
color: colors[5], ),
borderRadius:
BorderRadius.circular(smallColorHeight),
), ),
left: colorHeight / 2 - smallColorHeight / 2,
bottom: 0,
), ),
left: colorHeight / 2 - smallColorHeight / 2, Positioned(
bottom: 0, child: Container(
), width: smallColorHeight,
Positioned( height: smallColorHeight,
child: Container( decoration: BoxDecoration(
width: smallColorHeight, color: colors[6],
height: smallColorHeight, borderRadius:
decoration: BoxDecoration( BorderRadius.circular(smallColorHeight),
color: colors[6], ),
borderRadius:
BorderRadius.circular(smallColorHeight),
), ),
left: colorHeight / 2 - smallColorHeight / 2,
bottom: 0,
), ),
left: colorHeight / 2 - smallColorHeight / 2, Positioned(
bottom: 0, child: Container(
), width: smallColorHeight,
Positioned( height: smallColorHeight,
child: Container( decoration: BoxDecoration(
width: smallColorHeight, color: colors[7],
height: smallColorHeight, borderRadius:
decoration: BoxDecoration( BorderRadius.circular(smallColorHeight),
color: colors[7], ),
borderRadius:
BorderRadius.circular(smallColorHeight),
), ),
left: colorHeight / 2 - smallColorHeight / 2,
bottom: colorHeight / 2 - smallColorHeight / 2,
), ),
left: colorHeight / 2 - smallColorHeight / 2, ],
bottom: colorHeight / 2 - smallColorHeight / 2,
),
],
),
),
);
} else {
index = index - 1;
return GestureDetector(
onTap: () {
_primaryColor = colors[index];
setState(() {});
},
child: SizedBox(
width: colorHeight,
height: colorHeight,
child: Container(
decoration: BoxDecoration(
color: colors[index],
borderRadius: BorderRadius.circular(colorHeight),
), ),
), ),
), );
} else {
index = index - 1;
return GestureDetector(
onTap: () {
_primaryColor = colors[index];
setState(() {});
},
child: SizedBox(
width: colorHeight,
height: colorHeight,
child: Container(
decoration: BoxDecoration(
color: colors[index],
borderRadius: BorderRadius.circular(colorHeight),
),
),
),
);
}
},
itemCount: colors.length + 1,
separatorBuilder: (BuildContext context, int index) {
return const SizedBox(
width: 15,
); );
} },
}, ),
itemCount: colors.length + 1,
separatorBuilder: (BuildContext context, int index) {
return const SizedBox(
width: 15,
);
},
), ),
), ],
], ),
), ),
); );
} }