flutter_学习记录_03_通过事件打开侧边栏
实现类似这样的侧边栏的效果：
可以用Drawer来实现。
1. 在Scaffold组件下设置endDrawer属性
代码如下：
import 'package:flutter/material.dart';
class ProductListPage extends StatefulWidget {
ProductListPage( {super.key}) ;
State<ProductListPage> createState() => _ProductListPageState();
}
class _ProductListPageState extends State<ProductListPage> {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("商品列表"),
),
// 用endDrawer 开启侧边栏
endDrawer: Drawer(
child: Container(
child: const Center(
child: Text("你点击了筛选"),
),
),
),
body:Container() ,
);
}
}
效果图如下：
2. 通过事件开启侧边栏
2.1 在当前页面创建一个key的属性
final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
2.2 在Scaffold 中设置key
Scaffold(
// 设置key值
key: _scaffoldKey,
appBar: AppBar(
title: const Text("商品列表"),
// 将导航栏右侧按钮隐藏
actions: const [
Text("")
],
),
// 设置右侧的侧边栏
endDrawer: Drawer(
child: Container(
child: const Center(
child: Text("你点击了筛选"),
),
),
),
body: Stack(
children: [
],
),
);
}
2.3 在点击事件中，设置跳转
onTap: (){
_scaffoldKey.currentState!.openEndDrawer();
},
2.4 代码示例
import 'package:flutter/material.dart';
class ProductListPage extends StatefulWidget {
ProductListPage({super.key});
State<ProductListPage> createState() => _ProductListPageState();
}
class _ProductListPageState extends State<ProductListPage> {
// 设置唯一的key值
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
Widget build(BuildContext context) {
return Scaffold(
// 关联key值
key: _scaffoldKey,
appBar: AppBar(
title: const Text("商品列表"),
// 隐藏侧边栏的按钮
actions: const [
Text("")
],
),
// 设置侧边栏的事件
endDrawer: Drawer(
child: Container(
child: const Center(
child: Text("你点击了筛选"),
),
),
),
body: Stack(
children: [
_productListWidget(),
_titleNavigationWidget()
],
),
);
}
// 列表
Widget _productListWidget() {
return Container(
padding: EdgeInsets.all(10),
margin: EdgeInsets.only(top: 80),
child: ListView.builder(
itemCount: 10,
itemBuilder: (context, index) {
return _productListItemWidget();
}
),
);
}
// 列表的子控件
Widget _productListItemWidget() {
return Container(
child: Column(
children: [
Row(
children: [
Container(
width: 220,
height: 180,
child: Image.network(
"https://img0.baidu.com/it/u=1657154208,4249595445&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
fit: BoxFit.cover,
),
),
Expanded(
flex: 1,
child: Container(
padding: EdgeInsets.only(left: 15),
height: 180,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
"通过上面的代码，我们可以看到setInitialRoute方法传递了参数“myApp”，该参数用于告诉Dart代码显示哪个Flutter视图。在Flutter Module的main.dart文件中，需要通过window.defaultRouteName来获取Native指定要显示的路由名，以确定要创建哪个窗口小部件并传递给runApp",
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
Row(
children: [
Container(
height: 36,
margin: const EdgeInsets.only(right: 10),
padding: const EdgeInsets.fromLTRB(10, 0, 10, 0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: const Color.fromRGBO(230, 230, 230, 0.9),
),
child: const Center(child: Text("4G")),
),
Container(
height: 36,
margin: const EdgeInsets.only(right: 10),
padding: const EdgeInsets.fromLTRB(10, 0, 10, 0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: const Color.fromRGBO(230, 230, 230, 0.9),
),
child: const Center(child: Text("126")),
),
],
),
const Text(
"￥288",
textAlign: TextAlign.left,
style: TextStyle(
color: Colors.red,
),
)
],
)))
],
),
const Divider()
],
));
}
// 二级导航栏
Widget _titleNavigationWidget() {
return Positioned(
width: 750,
height: 80,
top: 0,
child:Container(
width: 750,
height: 80,
decoration: const BoxDecoration(
border: Border(
bottom: BorderSide(
width: 1,
color: Color.fromRGBO(233, 233, 233, 0.9)
)
)
),
child: Row(
children: [
_titleNavigationItemWidget("综合"),
_titleNavigationItemWidget("销量"),
_titleNavigationItemWidget("价格"),
_titleNavigationItemWidget("筛选"),
],
),
));
}
// 二级导航栏的子控件
Widget _titleNavigationItemWidget(String title) {
return Expanded(
child: InkWell(
onTap: (){
// 通过事件开启侧边栏
_scaffoldKey.currentState!.openEndDrawer();
},
child: Container(
height: 80,
child: Center(
child: Text(title, textAlign: TextAlign.center,) ,
)
) ,
));
}
}