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

2020-11-16  本文已影响0人  Faith_K

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')
      );
    });
上一篇 下一篇

猜你喜欢

热点阅读