【Flutter 专题】130 图解 DraggableScrollableSheet 可手势滑动的菜单栏

举报
阿策小和尚 发表于 2022/04/27 09:16:52 2022/04/27
【摘要】 0 基础学习 Flutter,第一百三十步:尝试 DraggableScrollableSheet 可手势滑动的菜单栏!

    小菜发现在长期未登陆小米应用市场时,再次登陆会有可滑动的半屏底部菜单,供用户方便下载和推广;而在 Flutter 中这个半屏底部菜单并不是一个简单的 BottomSheet 完成的,可以通过 DraggableScrollableSheet 根据手势操作滑动固定位的菜单栏完成;小菜简单学习一下;

DraggableScrollableSheet

源码分析

const DraggableScrollableSheet({
    Key key,
    this.initialChildSize = 0.5,    // 初始比例
    this.minChildSize = 0.25,       // 最小比例
    this.maxChildSize = 1.0,        // 最大比例
    this.expand = true,             // 是否填充满
    @required this.builder,
})

@overridep
Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        _extent.availablePixels = widget.maxChildSize * constraints.biggest.height;
        final Widget sheet = FractionallySizedBox(
          heightFactor: _extent.currentExtent,
          child: widget.builder(context, _scrollController),
          alignment: Alignment.bottomCenter,
        );
        return widget.expand ? SizedBox.expand(child: sheet) : sheet;
      },
    );
}

    简单分析源码 DraggableScrollableSheet 作为一个有状态的 StatefulWidget 小组件,通过 FractionallySizedBox 以父 Widget 为基数,可设置宽高比例的容器构建子内容;

案例尝试

1. builder

    ScrollableWidgetBuilder 构造器作为必选字段,用于在 DraggableScrollableSheet 中显示可滑动的子内容;其中返回内容需为可滑动的 ScrollableWidget,例如 ListView / GridView / SingleChildScrollView 等;

_listWid(controller) => SingleChildScrollView(
    controller: controller,
    child: Column(children: [
      Container(
          height: 5.0, width: 25.0,
          decoration: BoxDecoration(color: Colors.blue.withOpacity(0.8), borderRadius: BorderRadius.all(Radius.circular(16.0))),
          margin: EdgeInsets.symmetric(vertical: 12.0)),
      Padding(
          padding: EdgeInsets.symmetric(horizontal: 12.0),
          child: GridView.builder(
              physics: ScrollPhysics(),
              primary: false, shrinkWrap: true,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 5, mainAxisSpacing: 8.0, crossAxisSpacing: 12.0, childAspectRatio: 0.7),
              itemCount: 12,
              itemBuilder: (context, index) => GestureDetector(
                  child: Column(children: <Widget>[
                    PhysicalModel(
                        color: Colors.transparent, shape: BoxShape.circle,
                        clipBehavior: Clip.antiAlias, child: Image.asset('images/icon_hzw01.jpg')),
                    SizedBox(height: 4), Text('海贼王')
                  ]),
                  onTap: () {}))),
      ListView.builder(
          physics: NeverScrollableScrollPhysics(),
          shrinkWrap: true,
          itemCount: 15,
          itemBuilder: (BuildContext context, index) => ListTile(title: Text('Current Item = ${(index + 1)}')))
    ]));

2. initialChildSize

    initialChildSize 用于显示初始子 Widgets 所占父 Widget 比例;同时,若返回的子 Widget 未提供 ScrollController,则 DraggableScrollableSheet 不会随手势进行滑动,小菜理解为 initialChildSize = minChildSize = maxChildSize

_sheetWid02() => DraggableScrollableSheet(
    initialChildSize: 0.66,
    builder: (BuildContext context, ScrollController scrollController) =>
        Container(
            decoration: BoxDecoration(
                color: Colors.grey.withOpacity(0.4),
                borderRadius: BorderRadius.only(topLeft: Radius.circular(16.0), topRight: Radius.circular(16.0))),
            child: _listWid(null)));

3. minChildSize & maxChildSize

    minChildSize & maxChildSize 分别对应子 Widgets 占整体的最大最小比例,其中 initialChildSize 需要在两者之间;

_sheetWid03() => DraggableScrollableSheet(
    initialChildSize: 0.6,
    minChildSize: 0.3,
    maxChildSize: 0.9,
    expand: true,
    builder: (BuildContext context, ScrollController scrollController) =>
        Container(
            decoration: BoxDecoration(
                color: Colors.grey.withOpacity(0.4),
                borderRadius: BorderRadius.only(topLeft: Radius.circular(16.0), topRight: Radius.circular(16.0))),
            child: _listWid(scrollController)));

4. expand

    expand 用于是否填充满父 Widget,若 DraggableScrollableSheet 外层固定高度则不影响;若外层未对高度进行固定,expand 作用于是否填充满父 Widget;构造的源码也是通过 SizedBox.expand 对父 Widget 进行填充判断的;

return widget.expand ? SizedBox.expand(child: sheet) : sheet;

小扩展

    之前在分析 DraggableScrollableSheet 时其源码采用了 FractionallySizedBox 比例容器,小菜简单了解一下,其源码非常简单,通过设置 heightFactor & widthFactor 占父 Widget 的比例即可,通过 alignment 设置所在父 widget 的对齐方式;

SizedBox.expand(child: _sizedBox())

_sizedBox() => FractionallySizedBox(
    heightFactor: 0.5,
    widthFactor: 0.5,
    alignment: Alignment.center,
    child: Container(
        color: Colors.deepOrange.withOpacity(0.4),
        child: ListView.builder(
            itemCount: 15,
            itemBuilder: (BuildContext context, index) => ListTile(title: Text('Current Item = ${(index + 1)}')))));


    案例源码


    小菜对 DraggableScrollableSheet 的手势滑动过程还不够熟悉,之后会对手势进行进一步学习;如有错误,请多多指导!

来源: 阿策小和尚

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。