flutter 自定义侧边栏showDialog
flutter 自定义 侧边
2023-09-14 09:04:28 时间
showDialog+添加平移动画效果
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import '../../common/Global.dart';
import '../../common/colors.dart';
import '../../router.dart';
import '../widget/myText.dart';
//小说目录
class NovelCatalogue extends StatefulWidget {
@override
State<StatefulWidget> createState() => NovelCatalogueState();
}
class NovelCatalogueState extends State<NovelCatalogue> with SingleTickerProviderStateMixin{
bool hasShowCatalogue = false;
late AnimationController controller;
late Animation<Offset> animation;
@override
void initState() {
controller = AnimationController(
duration: const Duration(milliseconds: 200), vsync: this);
animation = Tween(begin: const Offset(1, 0), end: const Offset(0, 0))
.animate(controller);
if (controller.isCompleted || controller.isDismissed) {
controller.forward();
hasShowCatalogue=true;
}
super.initState();
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: _requestPop,
child: SlideTransition(
position: animation,
child: GestureDetector(
onTap: () {
hasShowCatalogue=false;
controller.reverse();
Future.delayed(Duration(milliseconds: 100), () {
MyRouter.pop(context);
});
},
child: Material(
color: Colors.transparent,
child: GestureDetector(
onTap: () {},
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
alignment: Alignment.centerRight,
height: Global.screenHeight,
width: Global.screenWidth - 70,
color: Colors.white,
child: Column(
children: [
addHeadView(),
Expanded(
child: SingleChildScrollView(
child: Column(
children: [
MediaQuery.removePadding(
removeTop: true,
context: context,
child: ListView.builder(
itemCount: 10,
physics:
const NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemBuilder: (BuildContext context,
int index) {
return Container(
margin: EdgeInsets.only(
left: 10.r, right: 10.r),
child: Column(
children: [
Row(
children: [
ConstrainedBox(
constraints: BoxConstraints(
maxWidth: Global
.screenWidth -
20 -
70),
child: Text(
'第九百八十章 不经意的指点是一个是佛啊后方熬哦跌幅为地上',
style: TextStyle(
color: Colors
.black,
fontSize:
16.sp),
),
),
],
),
Container(
margin: EdgeInsets.only(
top: 10.r,
bottom: 10.r),
height: 1,
color: Colors.grey,
)
],
),
);
}))
],
),
))
],
),
),
],
),
),
),
),
),
);
}
Widget addHeadView() {
return Container(
padding: EdgeInsets.only(
top: Global.topHeight, left: 10.r, bottom: 5.r, right: 15.r),
margin: EdgeInsets.only(bottom: 10.r),
child:
Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: const Image(
image: AssetImage('assets/images/icon_back@2x.png'),
width: 24,
height: 25,
color: Colors.black,
),
),
GestureDetector(
onTap: () {
//点击后清空列表数据,获取最底部的数据
},
child: ContentText('顺序', 16.0, CommonColors.getColor1A1A1A))
]));
}
//监听物理返回键,限制返回
Future<bool> _requestPop() {
print('是否展示目录}');
if(mounted){
if (Navigator.canPop(context)) {
if(hasShowCatalogue){
controller.reverse();
hasShowCatalogue=false;
print('返回键进到这里1');
Future.delayed(Duration(milliseconds: 100),(){
MyRouter.pop(context);
});
}else{
MyRouter.pop(context);
print('返回键进到这里2');
}
// MyRouter.pop(context);
}
}
return Future.value(false);
}
}
使用时
showBroadSide() {
showDialog(
useSafeArea:false,
context: context,
builder: (context) => NovelCatalogue());
}
相关文章
- Flutter之GetX集成及使用详解
- 重走Flutter状态管理之路—Riverpod最终篇
- Flutter 语法进阶 | 深入理解混入类 mixin
- flutter中多flavors方案以及添加firebase
- 每日tips:Dart & Flutter Easy Wins 8-14
- 使用Flutter_Redux实现主题切换
- Flutter 绘制实践 | 路径篇 - 阴影模糊
- Flutter 绘制实践 | 路径篇 · 数字显示管
- 第132期:Flutter中的状态
- 【Flutter】Dart 面向对象 ( 类定义 | 类的继承 | 私有变量 | 可选参数 | 默认参数 | 初始化列表 )
- 【错误记录】Flutter 环境安装相关问题 ( 执行 flutter doctor 命令后续错误处理 )
- 【Flutter】Flutter 自定义字体 ( 下载 TTF 字体 | pubspec.yaml 配置字体资源 | 同步资源 | 全局应用字体 | 局部应用字体 )
- 【Flutter】Flutter 照片墙 ( Center 组件 | Wrap 组件 | ClipRRect 组件 | Stack 组件 | Positioned 组件 | 按钮组合组件 )
- 【Flutter】顶部导航栏实现 ( Scaffold | DefaultTabController | TabBar | Tab | TabBarView )
- 【Flutter】Banner 轮播组件 ( flutter_swiper 插件 | Swiper 组件 )
- 【Flutter】Flutter 混合开发 ( Dart 代码调试 | Flutter 单独调试 | 混合模式下 Flutter 调试 )
- 【Flutter】自定义 Flutter 组件 ( 创建自定义 StatelessWidget、StatefulWidget 组件 | 调用自定义组件 )