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/theme.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 'config_viewmodel.dart';
@@ -16,7 +17,8 @@ class ConfigPage extends StatefulWidget {
ConfigPageState createState() => ConfigPageState();
}
class ConfigPageState extends State<ConfigPage> with SingleTickerProviderStateMixin {
class ConfigPageState extends State<ConfigPage>
with SingleTickerProviderStateMixin {
TabController? _tabController;
@override
@@ -28,7 +30,11 @@ class ConfigPageState extends State<ConfigPage> with SingleTickerProviderStateMi
Widget build(BuildContext context) {
return BaseStateWidget<ConfigViewModel>(
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(
children: [
@@ -60,7 +66,10 @@ class ConfigPageState extends State<ConfigPage> with SingleTickerProviderStateMi
padding: const EdgeInsets.symmetric(
horizontal: 15,
),
theme: ref.watch(themeProvider).themeColor.codeEditorTheme(),
theme: ref
.watch(themeProvider)
.themeColor
.codeEditorTheme(),
tabSize: 14,
),
),
@@ -82,7 +91,8 @@ class ConfigPageState extends State<ConfigPage> with SingleTickerProviderStateMi
if (_tabController == null || _tabController!.length == 0) return;
navigatorState.currentState?.pushNamed(Routes.routeConfigEdit, arguments: {
"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 {
if (value != null && (value as String).isNotEmpty) {
await ref.read(configProvider).loadContent(value);

View File

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