Skip to content

Commit

Permalink
feat:调整加载的页面卡顿问题，统一设置导航为公共组件
Browse files Browse the repository at this point in the history
  • Loading branch information
@Tecode
Tecode committed Jul 18, 2024
1 parent 683dbe1 commit 1b12232
Show file tree
Hide file tree
Showing 2 changed files with 117 additions and 152 deletions.
254 changes: 102 additions & 152 deletions lib/containers/navigation_positioning.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import 'dart:async';
import 'dart:convert';

import 'package:dynamic_theme/helpers/colors.dart';
import 'package:dynamic_theme/widgets/common/nav_back_button.dart';
import 'package:dynamic_theme/widgets/common/custom_nav_bar.dart';
import 'package:dynamic_theme/widgets/tab_indicator.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
Expand Down Expand Up @@ -37,30 +37,18 @@ class _ScrollNavigationPositioningState extends State<NavigationPositioning> {
late Map<dynamic, dynamic> cityMap = {};
List<GlobalKey> keyList = [];
BuildContext? tabContext;
late ScrollController _controller;
ScrollController? _controller;
final Debounce _debounce = Debounce(delay: const Duration(milliseconds: 500));

@override
void initState() {
super.initState();
_cityListLoad();
// 监听状态栏点击事件
Future.microtask(() {
_controller = PrimaryScrollController.of(context);
_controller.addListener(() => _debounce.run(handleTabChange));
});
}

// 加载省市数据
void _cityListLoad() {
rootBundle.loadString('assets/city_list.json').then((value) {
var jsonValue = json.decode(value) as Map;
cityMap = jsonValue;
for (int index = 0; index < cityMap.length; index++) {
keyList.add(GlobalKey());
}
setState(() {});
});
Future<void> loadCityList() async {
// await Future.delayed(const Duration(milliseconds: 300));
var value = await rootBundle.loadString('assets/city_list.json');
var jsonValue = json.decode(value) as Map;
cityMap = jsonValue;
for (int index = 0; index < cityMap.length; index++) {
keyList.add(GlobalKey());
}
}

void handleTabChange() {
Expand All @@ -83,7 +71,7 @@ class _ScrollNavigationPositioningState extends State<NavigationPositioning> {
}

void handleScroll(int index) async {
_controller.removeListener(() => _debounce.run(handleTabChange));
_controller?.removeListener(() => _debounce.run(handleTabChange));
final context = keyList[index].currentContext;
if (context == null) {
return;
Expand All @@ -92,152 +80,114 @@ class _ScrollNavigationPositioningState extends State<NavigationPositioning> {
context,
duration: const Duration(milliseconds: 600),
);
_controller.addListener(() => _debounce.run(handleTabChange));
_controller?.addListener(() => _debounce.run(handleTabChange));
}

@override
Widget build(BuildContext context) {
final isDark = Theme.of(context).brightness == Brightness.dark;

return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
transitionBetweenRoutes: false,
middle: const Text('滑动定位'),
leading: NavBackButton(onTap: () => Navigator.pop(context, '数据传参')),
),
navigationBar: CustomNavigationBar('滑动定位'),
child: Material(
child: SafeArea(
bottom: false,
child: Column(
children: [
DefaultTabController(
length: cityMap.keys.length,
child: Builder(
builder: (context) {
tabContext = context;
return TabBar(
indicator: const TabIndicator(),
indicatorColor: ColorTheme.of(context).borderColor,
labelColor: ColorTheme.of(context).borderColor,
isScrollable: true,
tabs: List.generate(
cityMap.keys.length,
(index) {
var key = cityMap.keys.toList()[index];
var list = (cityMap[key] as List).first;
return Tab(
child: Text(
'${list['province']}',
style: TextStyle(
color: isDark ? Colors.white : Colors.black,
fontSize: 16.0,
),
),
);
},
),
onTap: handleScroll,
);
},
),
),
Expanded(
child: SingleChildScrollView(
controller: _controller,
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Column(
children: List.generate(
cityMap.keys.length,
(index) {
var key0 = cityMap.keys.toList()[index];
var list0 = cityMap[key0] as List;
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
key: keyList[index],
padding: const EdgeInsets.only(top: 10.0),
child: Text(
'${list0.first['province']}',
style: TextStyle(
color: isDark ? Colors.white : Colors.black,
fontSize: 16.0,
fontWeight: FontWeight.w500,
child: FutureBuilder(
future: loadCityList(),
builder: (_, AsyncSnapshot<dynamic> snapshot) {
if (snapshot.connectionState != ConnectionState.done) {
return const SizedBox.shrink();
}

_controller = PrimaryScrollController.of(context);
_controller?.addListener(() => _debounce.run(handleTabChange));
return Column(
children: [
DefaultTabController(
length: cityMap.keys.length,
child: Builder(
builder: (context) {
tabContext = context;
return TabBar(
indicator: const TabIndicator(),
indicatorColor: ColorTheme.of(context).borderColor,
labelColor: ColorTheme.of(context).borderColor,
isScrollable: true,
tabs: List.generate(
cityMap.keys.length,
(index) {
var key = cityMap.keys.toList()[index];
var list = (cityMap[key] as List).first;
return Tab(
child: Text(
'${list['province']}',
style: TextStyle(
color: isDark ? Colors.white : Colors.black,
fontSize: 16.0,
),
),
),
),
Column(
);
},
),
onTap: handleScroll,
);
},
),
),
Expanded(
child: SingleChildScrollView(
controller: _controller,
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Column(
children: List.generate(
cityMap.keys.length,
(index) {
var key0 = cityMap.keys.toList()[index];
var list0 = cityMap[key0] as List;
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: List.generate(
list0.length,
(index) => Container(
padding: const EdgeInsets.symmetric(vertical: 15),
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(color: Colors.black.withOpacity(0.08)),
children: [
Padding(
key: keyList[index],
padding: const EdgeInsets.only(top: 10.0),
child: Text(
'${list0.first['province']}',
style: TextStyle(
color: isDark ? Colors.white : Colors.black,
fontSize: 16.0,
fontWeight: FontWeight.w500,
),
),
width: double.infinity,
child: Text(
'${list0[index]['name']}',
style: TextStyle(color: isDark ? Colors.white : Colors.black, fontSize: 15.0),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: List.generate(
list0.length,
(index) => Container(
padding: const EdgeInsets.symmetric(vertical: 15),
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(color: Colors.black.withOpacity(0.08)),
),
),
width: double.infinity,
child: Text(
'${list0[index]['name']}',
style: TextStyle(color: isDark ? Colors.white : Colors.black, fontSize: 15.0),
),
),
),
),
),
),
],
);
},
],
);
},
),
),
),
),
),
// child: ListView.builder(
// controller: _controller,
// padding: const EdgeInsets.symmetric(horizontal: 16),
// itemBuilder: (context, index) {
// var _key = cityMap.keys.toList()[index];
// var _list = cityMap[_key] as List;
// return Column(
// crossAxisAlignment: CrossAxisAlignment.start,
// children: [
// Padding(
// padding: const EdgeInsets.only(top: 10.0),
// child: Text(
// '${_list.first['province']}',
// style: TextStyle(
// color: isDark ? Colors.white : Colors.black,
// fontSize: 16.0,
// fontWeight: FontWeight.w500,
// ),
// key: keyList[index],
// ),
// ),
// Column(
// crossAxisAlignment: CrossAxisAlignment.start,
// children: List.generate(
// _list.length,
// (index) => Container(
// child: Text(
// '${_list[index]['name']}',
// style: TextStyle(color: isDark ? Colors.white : Colors.black, fontSize: 15.0),
// ),
// padding: const EdgeInsets.symmetric(vertical: 15),
// decoration: BoxDecoration(
// border: Border(
// bottom: BorderSide(color: Colors.black.withOpacity(0.08)),
// ),
// ),
// width: double.infinity,
// ),
// ),
// ),
// ],
// );
// },
// itemCount: cityMap.keys.length,
// ),
)
],
)
],
);
},
),
),
),
Expand Down
15 changes: 15 additions & 0 deletions lib/widgets/common/custom_nav_bar.dart
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import 'package:dynamic_theme/containers/app.dart';
import 'package:flutter/cupertino.dart';

import 'nav_back_button.dart';

class CustomNavigationBar extends CupertinoNavigationBar {
final String title;
final VoidCallback? onTap;
CustomNavigationBar(this.title, {super.key, super.transitionBetweenRoutes, super.border, this.onTap})
: super(
middle: Text(title),
padding: const EdgeInsetsDirectional.only(end: 20.0),
leading: NavBackButton(onTap: onTap ?? () => Navigator.maybePop(App.materialKey.currentContext!)),
);
}

0 comments on commit 1b12232

Please sign in to comment.