add tabbar

This commit is contained in:
jyuesong
2022-01-17 14:29:59 +08:00
parent c7b98a04db
commit 9f2aa34e29
7 changed files with 51 additions and 652 deletions

View File

@@ -1,13 +1,10 @@
import 'package:flutter/material.dart';
import 'package:flutter_highlight/flutter_highlight.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:qinglong_app/base/base_state_widget.dart';
import 'package:qinglong_app/base/code_editor/code_editor.dart';
import 'package:qinglong_app/base/code_editor/EditorModel.dart';
import 'package:qinglong_app/base/code_editor/EditorModelStyleOptions.dart';
import 'package:qinglong_app/base/code_editor/FileEditor.dart';
import 'package:qinglong_app/base/http/url.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/main.dart';
import 'config_viewmodel.dart';
@@ -19,40 +16,56 @@ class ConfigPage extends StatefulWidget {
ConfigPageState createState() => ConfigPageState();
}
class ConfigPageState extends State<ConfigPage> {
GlobalKey<CodeEditorState> globalKey = GlobalKey();
class ConfigPageState extends State<ConfigPage> with SingleTickerProviderStateMixin {
TabController? _tabController;
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return BaseStateWidget<ConfigViewModel>(
builder: (ref, model, child) {
List<FileEditor> files = model.list
.map(
(e) => FileEditor(
name: e.title,
language: "sh",
code: model.content[e.title], // [code] needs a string
_tabController ??= TabController(length: model.list.length, vsync: this);
return Column(
children: [
TabBar(
controller: _tabController,
tabs: model.list
.map((e) => Tab(
text: e.title,
))
.toList(),
isScrollable: true,
indicator: AbsUnderlineTabIndicator(
wantWidth: 20,
borderSide: BorderSide(
color: Theme.of(context).primaryColor,
width: 2,
),
),
)
.toList();
EditorModel editMode = EditorModel(
files: files,
styleOptions: EditorModelStyleOptions(
fontSize: 13,
editorNormalFilenameColor: ref.read(themeProvider).themeColor.descColor(),
heightOfContainer: MediaQuery.of(context).size.height - kToolbarHeight - kBottomNavigationBarHeight - 90,
editorBorderColor: Theme.of(context).scaffoldBackgroundColor,
editButtonBackgroundColor: Theme.of(context).scaffoldBackgroundColor,
editorColor: Theme.of(context).scaffoldBackgroundColor,
editorFilenameColor: Theme.of(context).primaryColor,
theme: ref.watch(themeProvider).themeColor.codeEditorTheme(),
),
);
return CodeEditor(
key: globalKey,
model: editMode,
edit: false,
disableNavigationbar: false,
),
Expanded(
child: TabBarView(
controller: _tabController,
children: model.list
.map(
(e) => SingleChildScrollView(
child: HighlightView(
model.content[e.title] ?? "",
language: "sh",
theme: ref.watch(themeProvider).themeColor.codeEditorTheme(),
tabSize: 14,
),
),
)
.toList(),
),
),
],
);
},
model: configProvider,
@@ -63,9 +76,10 @@ class ConfigPageState extends State<ConfigPage> {
}
void editMe(WidgetRef ref) {
int index = globalKey.currentState?.getCurrentIndex() ?? 0;
navigatorState.currentState?.pushNamed(Routes.route_ConfigEdit,
arguments: {"title": ref.read(configProvider).list[index].title, "content": ref.read(configProvider).content[ref.read(configProvider).list[index].title]});
if (_tabController == null || _tabController!.length == 0) return;
navigatorState.currentState?.pushNamed(Routes.route_ConfigEdit, arguments: {
"title": ref.read(configProvider).list[_tabController?.index ?? 0].title,
"content": ref.read(configProvider).content[ref.read(configProvider).list[_tabController?.index ?? 0].title]
});
}
}