美文网首页
flutter Drawer 使用以及自定义,打开Drawer

flutter Drawer 使用以及自定义,打开Drawer

作者: Faith_K | 来源:发表于2020-11-16 20:16 被阅读0次

    Scaffold 里面有包含两个Drawer 一个drawer endDrawer

    image.png
      /// {@end-tool}  左边弹出 
      final Widget drawer; 
    
      /// {@end-tool}  右边弹出 
      final Widget endDrawer;
    

    endDrawer 与 drawer 同样都是需要传一个Widget,所以我们可以任意写就好了,Drawer默认会给我们一个背景的。

     Scaffold(
          backgroundColor: Colours.hexColor(0xf5f5f5),
          appBar: AppBar(),
          endDrawer: ScreeningDrawerView(),
          body: Container()
        );
    
    
    import 'package:app/app/res/colors.dart';
    import 'package:flutter/material.dart';
    import 'package:flutter_screenutil/flutter_screenutil.dart';
    class ScreeningDrawerView extends StatefulWidget {
      @override
      _ScreeningDrawerViewState createState() => _ScreeningDrawerViewState();
    }
    
    class _ScreeningDrawerViewState extends State<ScreeningDrawerView> {
      @override
      Widget build(BuildContext context) {
        return Container(
          padding: EdgeInsets.only(left: 17,right: 17),
          color: Colors.white,
          height: ScreenUtil().screenHeight,
          width: ScreenUtil().screenWidth  -44,
          child: SafeArea(
            child: CustomScrollView(
              slivers: [
                SliverToBoxAdapter(
                  child: Text('优质服务', style: TextStyle(
                      color: Colors.black, fontWeight: FontWeight.bold),),
                ),
                SliverToBoxAdapter(
                  child: SizedBox(height: 20,),
                ),
                SliverGrid(
                    delegate:
                    SliverChildBuilderDelegate((BuildContext context, int index) {
                      return InkWell(
                        child: Container(
                          alignment: Alignment.center,
                          decoration: BoxDecoration(
                              color: Colours.hexColor(0xebebec),
                              borderRadius: BorderRadius.circular(4)
                          ),
                          child: Text('电子发票'),
                        ),
                        onTap: () {},
                      );
                    }, childCount: 6),
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 3,
                        crossAxisSpacing: 11,
                        mainAxisSpacing: 12,
                        childAspectRatio: 3.5)),
              ],
            ),
          ),
        );
      }
    }
    
    

    在其他按钮方法里面打开 我们 的endDrawer ,需要包一个Builder

     Builder(builder: (context){
          return InkWell(
            onTap: (){
              Scaffold.of(context).openEndDrawer();
    
            },
            child:Text('data')
          );
        });
    

    相关文章

      网友评论

          本文标题:flutter Drawer 使用以及自定义,打开Drawer

          本文链接:https://www.haomeiwen.com/subject/ggizbktx.html