flutter_学习记录_03_通过事件打开侧边栏

实现类似这样的侧边栏的效果：

可以用Drawer来实现。

1. 在Scaffold组件下设置endDrawer属性

代码如下：

import 'package:flutter/material.dart';

class ProductListPage extends StatefulWidget {
  ProductListPage( {super.key}) ;

  @override
  State<ProductListPage> createState() => _ProductListPageState();
}

class _ProductListPageState extends State<ProductListPage> {

  @override
  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});

  @override
  State<ProductListPage> createState() => _ProductListPageState();
}

class _ProductListPageState extends State<ProductListPage> {

	// 设置唯一的key值
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  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,) ,
          ) 
        ) ,
      ));
  }
}