首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在flutter draggablescrollablesheet中创建堆栈垂直列表视图和水平列表视图?

在Flutter中,可以使用DraggableScrollableSheet小部件创建一个可垂直拖动的底部抽屉,并在其中创建堆栈垂直列表视图和水平列表视图。以下是一个示例代码,展示如何实现此功能:

代码语言:txt
复制
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter DraggableScrollableSheet',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter DraggableScrollableSheet'),
      ),
      body: Stack(
        children: [
          ListView.builder(
            itemCount: 20,
            itemBuilder: (BuildContext context, int index) {
              return ListTile(
                title: Text('Item $index'),
              );
            },
          ),
          DraggableScrollableSheet(
            initialChildSize: 0.2,
            minChildSize: 0.1,
            maxChildSize: 0.8,
            builder: (BuildContext context, ScrollController scrollController) {
              return SingleChildScrollView(
                controller: scrollController,
                child: Container(
                  color: Colors.grey[200],
                  child: Column(
                    children: [
                      SizedBox(height: 20),
                      Text(
                        'Stacked Horizontal List View',
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 20,
                        ),
                      ),
                      SizedBox(height: 10),
                      SizedBox(
                        height: 200,
                        child: ListView.builder(
                          scrollDirection: Axis.horizontal,
                          itemCount: 10,
                          itemBuilder: (BuildContext context, int index) {
                            return Container(
                              width: 150,
                              margin: EdgeInsets.all(10),
                              color: Colors.blue,
                              child: Center(
                                child: Text(
                                  'Item $index',
                                  style: TextStyle(
                                    color: Colors.white,
                                    fontWeight: FontWeight.bold,
                                    fontSize: 16,
                                  ),
                                ),
                              ),
                            );
                          },
                        ),
                      ),
                      SizedBox(height: 20),
                      Text(
                        'Stacked Vertical List View',
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 20,
                        ),
                      ),
                      SizedBox(height: 10),
                      ListView.builder(
                        shrinkWrap: true,
                        physics: NeverScrollableScrollPhysics(),
                        itemCount: 10,
                        itemBuilder: (BuildContext context, int index) {
                          return Container(
                            height: 60,
                            margin: EdgeInsets.all(10),
                            color: Colors.green,
                            child: Center(
                              child: Text(
                                'Item $index',
                                style: TextStyle(
                                  color: Colors.white,
                                  fontWeight: FontWeight.bold,
                                  fontSize: 16,
                                ),
                              ),
                            ),
                          );
                        },
                      ),
                    ],
                  ),
                ),
              );
            },
          ),
        ],
      ),
    );
  }
}

在这个示例中,我们在一个Stack小部件中创建了两个列表视图:一个是堆栈的水平列表视图,另一个是堆栈的垂直列表视图。我们使用DraggableScrollableSheet小部件将它们放置在底部抽屉中,并使用ScrollController来控制滚动。通过调整initialChildSizeminChildSizemaxChildSize参数,可以控制抽屉的展开和关闭行为。

这个示例只是一个基本的实现,你可以根据自己的需求进行定制和扩展。关于堆栈垂直列表视图和水平列表视图的更多细节以及如何使用腾讯云相关产品实现,请参考以下链接:

希望这能帮助到你!

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

构建实用的Flutter文件列表:从简到繁的完美演进

希望通过本文,读者可以了解到构建文件列表的基本原理方法,以及如何在自己的应用应用这些技术,提升用户体验,提高工作效率。...根据按钮的点击状态,我们将显示列表视图或网格视图。 2. 构建网格视图 接下来,让我们来实现网格视图的布局。我们可以使用Flutter的GridView组件来展示文件列表。...我们使用SliverGridDelegateWithFixedCrossAxisCount来指定每行的文件数量,并设置了水平垂直方向的间距。...为了解决这个问题,让我们来学习一下如何在Flutter处理文本溢出,以确保文件名能够清晰可见。 1. 文本截断 我们可以使用Flutter的Text组件的overflow属性来处理文本溢出问题。...现在,我们的文件列表已经可以动起来了!(GIF动不了啊)(又可以动了) 总结 在本文中,我们详细探讨了如何在Flutter应用构建文件列表,并逐步改进优化这个文件列表,以提升用户体验功能性。

21711

UITableView在Flutter是什么?

这样的需求,在iOS是用UITableView实现的;而在Flutter,实现这种需求的则是列表控件ListView。...ListView 在Flutter,ListView可以沿一个方向(垂直或者水平方向)来排列其所有子Widget,因此常被用于需要展示一组连续视图元素的场景,比如通讯录、优惠券、商家列表等。...除了默认的垂直方向布局之外,ListView还可以通过设置 scrollDirection 参数支持水平方向布局。...总结 在处理展示一组连续、可滚动的视图元素的场景Flutter提供了比原生Android、iOS系统更为强大的列表组件ListView与CustomScrollView。...ListView组件,同时支持垂直方向水平方向滚动,不仅提供了少量一次性创建视图的默认构造方法,也提供了大量按需创建视图的ListView.builder机制,并且支持自定义分割线。

5.6K10
  • Flutter 视图布局(二)

    Axis scrollDirection 滚动的方向,即轴方向,Axis.vertical 垂直方向  Axis.horizontal 水平方向,默认为垂直方向 bool reverse 是否反向/颠倒顺序的...,默认为 false,为 true 则 垂直方向从底部开始,水平方向从右边开始 bool primary 是否是主主要的滚动 Widget,默认为 false, 如果为 true 则 controller... Widget 类型 reverse reverse 就是将列表的渲染方式是否是反向,垂直方向从底部开始,水平方向从右边开始 controller 关于滚动事件,如果真要说的话,那么篇幅就太长了...cacheExtent 在视图可见区域之外有一个区域(即垂直是上下部分,水平是左右部分),用于缓存滚动即进入可见区域的子类。...在默认情况下,如果列表子元素不足以超出可视范围则不会产生可滚动行为。超出可视范围则到达列表尽头时会停留并有水波样式出现。

    3K10

    Flutter 视图布局-前言

    01 - 视图的布局方式 简单说一下我对 Flutter 视图布局的看法,在前篇我有提到 Flutter 是使用了 Dart 语言进行编写,所以弱化了视图编辑的部分,视图的渲染、结构、布局都通过代码逻辑来生成...多子类元素布局 多子类元素布局的 Widget 有10种: Row 在水平方向上排列子元素的列表。 Column 在垂直方向上排列子元素的列表。...Wrap 可以在水平垂直方向多行显示其子元素。 Flow 一个可以实现流式布局算法的 Widget。 Stack 可以允许其子元素简单的堆叠在一起。...IndexedStack 从一个子元素列表显示单个子元素的 Stack。 CustomMultiChildLayout 使用一个委托来对多个子元素进行设置大小定位的小部件。...每一种 Widget 都会影响其子元素最终的视图显示效果,大小、位置、边框、背景等。

    2.3K110

    Flutter技术与实战(4)

    Flutter视图树的概念进行了扩展,把视图数据的组织渲染抽象为三部分,即 Widget,Element RenderObject。...State 的生命周期可以分为 3 个阶段:创建(插入视图树)、更新(在视图存在)、销毁(从视图移除)。接下来,我们一起看看每一个阶段的具体流程。...ListView 在 Flutter ,ListView 可以沿一个方向(垂直水平方向)来排列其所有子 Widget,因此常被用于需要展示一组连续视图元素的场景,比如通信录、优惠券、商家列表等。...除了默认的垂直方向布局外,ListView 还可以通过设置 scrollDirection 参数支持水平方向布局。...要导航到一个新的页面,我们需要创建一个 MaterialPageRoute 的实例,调用 Navigator.push 方法将新页面压到堆栈的顶部。

    10.8K20

    PyQT模块、类、控件介绍

    QtHelp模块 包含了用于创建和查看可查找的文档的类。 QtOpenGL模块 使用OpenGL库来渲染3D2D图形。该模块使得Qt GUI库OpenGL库无缝集成。...它也被用来直接创建没有任何内容的简单框架,但是通常要用到QHBox或QVBox,因为它们可以自动布置放到框架的窗口控件。 QApplication类 用于管理图形用户界面应用程序的控制流主要设置。...提供了一个水平的或垂直的滚动条 QSlider控件 提供了一个垂直的或水平的滑动条 QComboBox控件 一个组合按钮,用于弹出列表 QMenuBar控件 提供了一个横向菜单栏 QStatusBar...可以显示控制可选的多选列表,可以设置ListMode或IconMode QPixmap控件 可以在绘图设备上显示图像,通常放在QLabel或QPushButton类 Qdialog控件 对话框窗口的基类...ListView 列表视图 TreeView 树视图 TableView 表格视图 ColumnView 列视图 UndoView 撤销命令显示视图 Item Widgets(Item-Based

    52631

    Flutter》-- 6.高级组件

    参阅书籍: 《Flutter跨平台开发入门与实践》-- 向治洪(著) 6. 高级组件 6.1 可滚动组件 对于列表长布局的显示溢出问题,可以使用Flutter提供的可滚动组件来处理。...目前,可滚动组件的大部分组件都支持基于Sliver的延迟构建模型,ListView、GridView。...:视图窗口内部长度,大小等于屏幕显示的列表长度; extentAfter:列表未滑入视图窗口部分的长度; atEdge:是否滚动到了可滚动组件的边界。...如果滚动方向是垂直方向,则表示子组件的高度;如果滚动方向为水平方向,则表示子组件的长度。...6.5.2 自绘组件 在Flutter创建自绘组件需要用到CustomPaintCustomPainter两个类:CustomPaint在绘制阶段提供一个Canvas,即画布;CustomPainter

    10.6K20

    Flutter质感设计之底部导航

    import 'package:flutter/material.dart'; // 创建类,导航图标视图 class NavigationIconView { // 导航图标视图的构造函数 NavigationIconView...,不透明度大小的图标主题 child: new IconTheme( // 用于子控件图标的颜色,不透明度大小 data: new IconThemeData( // 图标的默认颜色 color:...import 'package:flutter/material.dart'; import 'navigation_icon_view.dart'; // 创建类,自定义图标,继承StatelessWidget...}); } // 建立过渡堆栈 Widget _buildTransitionsStack() { // 局部变量,存储不透明度转换的列表 final List<FadeTransition transitions...) // 在存储不透明度转换的列表添加transition函数的返回值 transitions.add(view.transition(_type, context)); // 对存储不透明度转换的列表进行排序

    3.1K21

    『PyQt5-基础篇』| 04 Qt Designer的初步快速了解

    ;2.2 Layouts布局Layouts是Qt Designer支持的4布局;图片布局说明 示例Vertical Layout 竖直布局图片Horizontal Layout水平布局 图片Grid...(基于模型);控件说明 List View 列表视图Tree View树视图Table View 表格视图 Column View列视图 Undo View撤销视图 2.6 Item Widgets(Item-Based...Box组合框图片Scroll Area滚动区图片Tool Box工具箱 图片Tab Widget选项卡图片Stacked Widget堆栈控件图片Frame边框控件图片Widget窗口控件图片MDI...图片Vertical Scroll Bar 垂直滚动条图片Horizontal Slider水平滑块图片Vertical Slider垂直滑块图片Key Sequence Edit键序列编辑器图片2.9...NumberLCD数字 图片Progress Bar进度条图片Horizontal Line 水平条图片Vertical Line垂直条 图片openGL widget开放图形库小部件图片3 部件属性比如

    91670

    开始使用-编写你的第一个Flutter应用程序 顶

    这是创建您的第一个Flutter应用程序的指南。 如果您熟悉面向对象的代码基本编程概念(变量,循环条件),则可以完成本教程。 您不需要以前使用Dart或移动编程的经验。...你会学到什么: Flutter应用程序的基本结构。 查找使用包来扩展功能。 使用热重载加快开发周期。 如何实现有状态的小部件。 如何创建一个无限的,延迟加载的列表。...有关如何设置环境的信息,请参阅Flutter安装设置。 第1步:创建起始Flutter应用程序 使用第一个Flutter应用程序入门的说明创建一个简单的模板化Flutter应用程序。...当用户滚动时,ListView小部件显示的列表将无限增长。 ListView的builder工厂构造函数允许您根据需要懒惰地构建列表视图。...您将学习如何在主路由新路由之间导航。 在Flutter,导航器管理包含应用程序路由的堆栈。 将路由推入导航器的堆栈,将显示更新为该路由。 从导航器的堆栈中弹出路由,将显示返回到前一个路由。

    9.5K20

    鸿蒙应用开发-初见:ArkUI

    不需要做太多布局计算的工作,让我们少掉一些头发ArkUISwiftUI的语法最像,甚至它们的状态管理也很像,都是提供了状态绑定监听机制来更新UI样式声明式UI布局原理简述FlutterWidget...的布局原理参考FlutterWidget的布局原理如下图所示。...想了解更多Flutter的布局原理可以查看 深入理解 Flutter 布局约束 SwiftUI的View布局原理参考SwiftUI的布局原理可以参考下图。...组件内容区的大小ArkUI中常用布局容器如何选择使用哪种布局线性布局(Row/Column)线性布局的子元素在线性方向上(水平方向垂直方向)依次排列线性布局容器包括 Row] Column 。...(List)列表容器是为了高效处理长列表的容器,能支持横向、竖向滚动,数据分组,分组头悬浮等功能列表容器内的所有子元素必须是 ListItemGroup 或ListItem,我们实际的内容是在这俩容器内部的创建列表子元素一般使用

    20010

    SwiftUI 之 HStack VStack 的切换

    前言 SwiftUI 的各种堆栈是许多框架中最基本的布局工具,能够让我们定义组视图,这些组视图可以按照水平垂直或覆盖视图对齐。...当涉及到水平垂直的变体时( HStack VStack ),我们需要在这两者之间动态的切换。...虽然可以在 LoginActionsView 中放入该逻辑,但我们希望以后能复用代码,因此需要重新创建一个专门的视图,作为一个独立的组件来实现动态堆栈的切换逻辑。...然而,就像上面的代码展示的那样,使用 GeometeryReader 来展示动态切换有一个相当明显的缺点,在几何图形阅读器总是会填充水平垂直方向的所有可用空间(以便测量实际空间)。...就像字面意思一样,这种新的容器将会在我们初始化时传递的候选列表,基于当前上下文挑选出最优视图

    2.8K10

    何在 SwiftUI 视图中显示应用图标版本

    前言在应用显示应用图标版本是为用户提供快速识别应用版本变体的好方法,无论是内部用户(测试人员或利益相关者)还是外部用户。...这些值通过我们之前创建的提供者传递给视图。我们在一个水平堆栈显示应用图标版本,间距为12点。我们在 Image 视图中显示应用图标。...但是,应用图标只能作为命名的 UIImage 检索,所以我们需要先创建 UIImage,然后再转换为 SwiftUI Image。我们在一个垂直堆栈显示应用版本,包括一个标签应用版本字符串。...我们学习了如何在 SwiftUI 应用显示应用图标版本信息。...在获取到应用图标版本信息后,我们创建了一个 SwiftUI 视图来展示这些信息。该视图使用水平堆栈(HStack)布局,将应用图标版本信息并排显示。

    15922

    《深入浅出Dart》Widget布局

    相比之下,HTML/CSS使用基于盒模型的布局,其中元素通过框模型定位属性进行布局。 Widget:Flutter用户界面的构建块 在Flutter,一切皆是Widget。...Flutter的Widget分为两类: StatelessWidget StatelessWidget是不可变的,一旦创建就不能更改。它们通常用于表示那些没有状态改变的静态UI元素。...布局组件:构建灵活的用户界面 在Flutter,有多种布局组件可供选择,用于在屏幕上排列定位Widget。...Column是用于水平垂直排列子Widget的强大布局组件。...Widget作为Flutter用户界面的构建块,帮助我们构建出灵活、交互丰富的应用程序。布局组件则允许我们在屏幕上排列定位Widget,创建出美观、一致的用户界面。

    26520

    使用 Android Studio 进行 Flutter 开发

    本文将与你一起回顾如何在 Android Studio 里进行 Flutter 工具的配置。 创建项目 你可以通过多种方式来创建新项目。 ?...点击工具栏的 Debug 按钮,或选择 Run > Debug。 底部的 Debugger 窗口会显示出堆栈变量信息。 底部的 Console 窗口会显示详细的日志输出。...例如,需要将 widget 嵌套在 Row 或 Column 。 Widget 列表嵌套辅助 上面的辅助类似,但它嵌套的是一个 widget 的列表,而不是单个的 widget。...在进行操作之前,请确保你使用的是最新版本的 Android Studio Flutter 插件。 在“项目视图,你可以在 flutter 应用的根目录下看到一个 android 的子目录。...确保选择 Flutter 使用相匹配的 Android SDK( flutter doctor 中所示)。 点击 OK。

    6.2K30

    Flutter』布局组件 Container、Row、Column、Stack

    Container Flutter的Container组件是一个非常通用且多功能的布局构件。它可以用来创建矩形的视觉元素,可以装饰以盒子装饰(例如背景色或边框),也可以配置边距、填充尺寸约束。...width height: 容器的宽度高度。 alignment: 控制子Widget如何在容器内对齐。...Row 在Flutter,RowColumn是用于布局的基本组件,它们分别用于在水平垂直方向上排列子组件。 Row组件可以在水平方向上排列其子组件。它是一个灵活的布局工具,常用于创建水平布局。...常用属性: children: Row的子组件列表。 mainAxisAlignment: 如何沿主轴(在此情况下为水平方向)对齐子组件。...Column Column组件用于在垂直方向上排列其子组件。 常用属性: children: Column的子组件列表

    89430

    SwiftUI水平条形图

    SwiftUI水平条形图 水平条形图以矩形条的形式呈现数据类别,其宽度与它们所代表的数值成正比。本文展示了如何在垂直条形图的基础上创建一个水平柱状图。 水平条形图不是简单的垂直条形图的旋转。...对于垂直条形图组件水平条形图组件来说,重复使用一些结构SwiftUI视图并不简单。标题关键区域可以原样重用。创建BarChartView的副本,并将其名称改为BarChartHView。...更新Y轴 我们创建了一个YaxisHView视图,用于在水平条形图上显示Y轴条形图中的数据类别。...更新X轴 同样,创建了一个XaxisHView视图来显示水平条形图的X轴,并使用与垂直条形图的Y轴类似的代码来布置刻度线刻度值。...在创建垂直条形图时学到的技术可以重复使用,但最好将水平条形图视为与垂直条形图不同的图表。当我们深入到轴等组件时,可以看到两个图表的轴线都是一样的,但是它们的标签定位在xy之间是换位的。

    4.8K20
    领券