首页 > 其他分享 >一统天下 flutter - widget 滚动类: DraggableScrollableSheet - 可滚动组件,并且支持通过拖拽的方式上下展开

一统天下 flutter - widget 滚动类: DraggableScrollableSheet - 可滚动组件,并且支持通过拖拽的方式上下展开

时间:2023-04-14 09:13:53浏览次数:41  
标签:widget 滚动 拖拽 flutter DraggableScrollableSheet return 展开

一统天下 flutter https://github.com/webabcd/flutter_demo
作者 webabcd

一统天下 flutter - widget 滚动类: DraggableScrollableSheet - 可滚动组件,并且支持通过拖拽的方式上下展开

示例如下:

lib\widget\scroll\draggable_scrollable_sheet.dart

/*
 * DraggableScrollableSheet - 可滚动组件,并且支持通过拖拽的方式上下展开
 */

import 'package:flutter/material.dart';

import '../../helper.dart';

class DraggableScrollableSheetDemo extends StatefulWidget {
  const DraggableScrollableSheetDemo({Key? key}) : super(key: key);

  @override
  _DraggableScrollableSheetDemoState createState() => _DraggableScrollableSheetDemoState();
}

class _DraggableScrollableSheetDemoState extends State<DraggableScrollableSheetDemo> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("title")),
      backgroundColor: Colors.orange,
      /// 监听当 DraggableScrollableSheet 的展开的高度发生变化时的通知
      body: NotificationListener<DraggableScrollableNotification>(
        onNotification: (notification) {
          /// 当前展开的高度(占用父的百分比)
          log('extent:${notification.extent}');
          return true;
        },
        child: _buildDraggableScrollableSheet(),
      ),
    );
  }

  Widget _buildDraggableScrollableSheet() {
    return DraggableScrollableSheet(
      /// 初始时的高度(占用父的百分比)
      initialChildSize: 0.3,
      /// 最大高度(占用父的百分比)
      minChildSize: 0.1,
      /// 最小高度(占用父的百分比)
      maxChildSize: 1,
      /// 是否需要扩展以填充父的可用空间
      expand: true,
      /// 上下展开时,高度是否只能是固定的几个值
      /// false - 上下展开时,高度根据你的拖拽行为走
      /// true - 上下展开时,高度只能是 minChildSize, maxChildSize, snapSizes 中指定的值
      snap: true,
      snapSizes: const [],
      /// snap 为 true 时,上下展开的高度变化时,动画的持续时间(默认为 null 会根据你的拖拽速度和变化长度自动决定)
      snapAnimationDuration: null,
      /// 注:这里需要包含一个可滚动组件,本例用的是 ListView
      builder: (BuildContext context, ScrollController scrollController) {
        return Container(
          color: Colors.green,
          child: ListView.builder(
            controller: scrollController,
            itemCount: 20,
            itemBuilder: (BuildContext context, int index) {
              return ListTile(title: Center(child: MyTextSmall('$index')));
            },
          ),
        );
      },
    );
  }
}

一统天下 flutter https://github.com/webabcd/flutter_demo
作者 webabcd

标签:widget,滚动,拖拽,flutter,DraggableScrollableSheet,return,展开
From: https://www.cnblogs.com/webabcd/p/flutter_lib_widget_scroll_draggable_scrollable_sheet.htm

相关文章

  • 一统天下 flutter - widget 容器类(只能有一个子): AspectRatio - 按比例
    一统天下flutterhttps://github.com/webabcd/flutter_demo作者webabcd一统天下flutter-widget容器类(只能有一个子):AspectRatio-按比例示例如下:lib\widget\container\aspect_ratio.dart/**AspectRatio-按比例*/import'package:flutter/material.dart';......
  • 一统天下 flutter - 输入: Draggable/DragTarget - 拖拽
    一统天下flutterhttps://github.com/webabcd/flutter_demo作者webabcd一统天下flutter-输入:Draggable/DragTarget-拖拽示例如下:lib\input\drag.dart/**Draggable/DragTarget-拖拽**Draggable-按下后可拖拽的对象*LongPressDraggable-长按后可......
  • 一统天下 flutter - widget 滚动类: ScrollNotification - 滚动通知
    一统天下flutterhttps://github.com/webabcd/flutter_demo作者webabcd一统天下flutter-widget滚动类:ScrollNotification-滚动通知示例如下:lib\widget\scroll\scroll_notification.dart/**ScrollNotification-滚动通知*/import'package:flutter/mater......
  • 一统天下 flutter - widget 滚动类: DraggableScrollableSheet - 可滚动组件,并且支持
    一统天下flutterhttps://github.com/webabcd/flutter_demo作者webabcd一统天下flutter-widget滚动类:DraggableScrollableSheet-可滚动组件,并且支持通过拖拽的方式上下展开示例如下:lib\widget\scroll\draggable_scrollable_sheet.dart/**DraggableScrollable......
  • 一统天下 flutter - widget 状态管理: 状态管理 - 在树上,父监听子的通知
    一统天下flutterhttps://github.com/webabcd/flutter_demo作者webabcd一统天下flutter-widget状态管理:状态管理-在树上,父监听子的通知示例如下:lib\state\notification_listener.dart/**状态管理-在树上,父监听子的通知**在树上,子通过Notification触......
  • 一统天下 flutter - widget 列表类: GridView - 网格
    一统天下flutterhttps://github.com/webabcd/flutter_demo作者webabcd一统天下flutter-widget列表类:GridView-网格示例如下:lib\widget\list\grid_view.dart/**GridView-网格*/import'dart:math';import'package:flutter/material.dart';im......
  • el-dialog每次重新打开展示不同的内容,滚动条未重新置顶的解决方案。
    环境nuxt3+vu3+element-plus-2.3.3复现原因假设有5条内容,打开一项内容通过el-dialog进行展示,当出现滚动条后,往下滑动,紧接着通过esc或遮罩进行关闭,打开另一项内容,这时候滚动条并未进行置顶。解决方法参考就行了。js部分constdata=reactive({newsDialog:{s......
  • 微信小程序实现无限滚动列表
    微信小程序实现无限滚动列表问题背景客户端日常开发和学习过程中,无限滚动列表是一种很常见的场景,比如用户获奖名单等,本文将介绍如何在微信小程序中实现无限自动滚动列表。问题分析页面文件目录结构如下:问题解决话不多说,直接上代码(1)index.js文件,代码如下://pages/healdata/......
  • Qt之QTableWidget的使用
    #ifndefMAINWINDOW_H#defineMAINWINDOW_H#include<QtWidgets>#include<QDebug>#include<QJsonArray>#include<QJsonObject>#include<QJsonValue>#include<QJsonDocument>#defineTABLE_HEADER_STYLE"QHeaderVie......
  • Flutter/React native/un-app
    Flutter是Google开源的构建用户界面(UI)工具包,帮助开发者通过一套代码库高效构建多平台精美应用,支持移动、Web、桌面和嵌入式平台。[5] Flutter开源、免费,拥有宽松的开源协议,适合商业项目。Flutter可以方便的加入现有的工程中。在全世界,Flutter正在被越来越多的开发者和组织使......