Flutter教学目录持续更新中

Github源代码持续更新中

1.DraggableScrollableSheetPage介绍

拖拽滚动布局，非常方便的实现的拖拽面板

2.DraggableScrollableSheetPage属性

• initialChildSize = 0.5：拖拽布局初始化高度占父节点的比例
• minChildSize = 0.25：拖拽布局最小高度占父节点的比例
• maxChildSize = 0.1：拖拽布局最大高度占父节点的比例
• expand = true：拖拽布局是否展开，false：拖拽布局的尺寸约束为当前尺寸，true：拖拽布局的尺寸约束为撑满父节点
• builder：内部需要是滑动布局，设置滑动布局的ScrollController为builder中的ScrollController

3.DraggableScrollableNotification

• minExtent：拖拽布局最小高度
• maxExtent：拖拽布局最大高度
• initialExtent：拖拽布局初始化高度
• extent：拖拽布局当前高度

4.使用

这里顺便填一下上一节的遗留问题DraggableScrollableNotification

      body: Stack(
        children: [
          Container(
            color: Colors.blue,
          ),
          NotificationListener<DraggableScrollableNotification>(
            onNotification: (notification) {
              print('####################');
              print('minExtent = ${notification.minExtent}');
              print('maxExtent = ${notification.maxExtent}');
              print('initialExtent = ${notification.initialExtent}');
              print('extent = ${notification.extent}');
              print('####################');
              return true;
            },
            child: DraggableScrollableSheet(
              builder: (
                BuildContext context,
                ScrollController scrollController,
              ) {
                return Container(
                  color: Colors.amber,
                  child: ListView.builder(
                    itemBuilder: (context, index) => ListTile(
                      title: Text('item $index'),
                    ),
                    itemCount: 30,
                    controller: scrollController,
                  ),
                );
              },
              initialChildSize: 0.8,
              minChildSize: 0.25,
              maxChildSize: 0.8,
              expand: true,
            ),
          )
        ],
      ),

image.png

下一节：Draggable组件之Draggable

Flutter（85）：Draggable组件之Draggable

Flutter教学目录持续更新中

Github源代码持续更新中