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

Flutter Bottom Sheet:如何在用户与工作表交互时更改高度

Flutter Bottom Sheet是一个常用的用户界面组件,用于在应用程序底部显示一个可交互的工作表。当用户与工作表进行交互时,有时需要根据交互行为动态更改工作表的高度。

要在用户与工作表交互时更改高度,可以使用setState方法来更新工作表的高度。以下是一个示例代码:

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

class MyBottomSheet extends StatefulWidget {
  @override
  _MyBottomSheetState createState() => _MyBottomSheetState();
}

class _MyBottomSheetState extends State<MyBottomSheet> {
  double _sheetHeight = 200.0; // 初始高度为200

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Bottom Sheet'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('打开工作表'),
          onPressed: () {
            showModalBottomSheet(
              context: context,
              builder: (BuildContext context) {
                return StatefulBuilder(
                  builder: (BuildContext context, StateSetter setState) {
                    return Container(
                      height: _sheetHeight,
                      child: Column(
                        children: [
                          Text('工作表内容'),
                          RaisedButton(
                            child: Text('增加高度'),
                            onPressed: () {
                              setState(() {
                                _sheetHeight += 50.0;
                              });
                            },
                          ),
                          RaisedButton(
                            child: Text('减少高度'),
                            onPressed: () {
                              setState(() {
                                _sheetHeight -= 50.0;
                              });
                            },
                          ),
                        ],
                      ),
                    );
                  },
                );
              },
            );
          },
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: MyBottomSheet(),
  ));
}

在上述示例中,我们使用showModalBottomSheet方法打开一个工作表。工作表的高度由变量_sheetHeight控制,初始高度为200。通过StatefulBuilder包裹工作表的内容,可以在工作表内部使用setState方法来更新工作表的高度。示例中的两个按钮分别增加和减少工作表的高度。

这是一个简单的示例,你可以根据实际需求进行更复杂的交互和高度变化操作。

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

相关·内容

掌握Flutter底部导航栏:畅游导航之旅

Flutter中,底部导航栏也是一项强大的功能,开发者可以利用Flutter框架提供的丰富组件和灵活性,轻松实现各种样式和交互效果的底部导航栏。...接下来的章节中,我们将深入探讨如何Flutter中创建和定制底部导航栏,包括基本结构的构建、外观的定制、页面的切换以及状态管理等方面的内容,帮助读者全面掌握底部导航栏的实现技巧方法。 3....Flutter提供了丰富的选项,使开发者可以轻松自定义底部导航栏的外观,包括选中项的颜色和图标、背景颜色和形状、导航栏的高度以及图标的大小等。本节中,我们将介绍如何实现底部导航栏的自定义外观。...底部导航栏状态管理 底部导航栏通常需要与应用程序的状态进行交互,例如根据用户的操作更新当前选中的导航项。Flutter提供了多种状态管理方法,其中包括使用Provider和Bloc进行状态管理。...接着,我们讨论了如何自定义底部导航栏的外观,包括更改选中项的颜色和图标、自定义背景颜色和形状、以及调整导航栏的高度和图标大小等。

27510

6详解AppBar小部件

本教程中,我们将通过一些实际示例向您展示如何Flutter 应用程序中自定义 AppBar。 以下是我们将介绍的内容: Flutter 中的 AppBar 是什么?...AppBar 通常显示概括本页的功能模块,例如图标和标题,并且通常包含按钮或其他用户交互点。...如果你已经做到了这一步,你现在应该明白: AppBar 是什么以及它如何Flutter 中使用 AppBar 的布局 ( leading, title, 和actions) 如何自定义 AppBar...的布局和添加小部件 如何为 AppBar 的图标、文本、背景、高度、阴影颜色和工具栏设置主题 所以我们有了!...AppBar 下方的控件,高度和 AppBar 高度一样, // 可以实现一些特殊的效果,该属性通常在 SliverAppBar 中使用 this.bottom,//一个 AppBarBottomWidget

16.3K10
  • Material Design — Navigation drawerStandard drawer Modal drawer Bottom drawer

    Modal navigation drawers 使用遮罩来阻止用户 app 内容的其余部分进行交互。 它们高于大多数 app 元素,不会影响屏幕的布局网格。 主要用于屏幕空间有限的移动设备。...导航抽屉可以从屏幕左侧出现 (1),或者 bottom app bar (2)同时使用时从屏幕底部打开。 范围小于62.5% ?...---- Scrim(遮罩,仅用于modal 和 bottom) Modal navigation drawers 使用遮罩来阻止用户 app 其余部分的交互。...比 top app bar 更低的高度 ---- Modal drawer 用法 Modal navigation drawers 会通过遮罩阻止用户 app 内容的其余部分进行交互。...滚动 Bottom navigation drawers 一旦打开至全屏高度,就可以在内部滚动。 当最初打开到屏幕高度的50%显示其他项目之前,必须将 drawer 拖到屏幕高度

    3.8K40

    Flutter 中自定义动画底部导航栏

    在这个博客中,我们将探索Flutter中的自定义动画底部导航栏。我们将看到如何实现自定义动画底部导航栏的演示程序以及如何在您的 Flutter 应用程序中使用它。...这个演示视频展示了如何flutter 中使用自定义的底部导航栏。它展示了自定义底部导航栏将如何在您的 Flutter 应用程序中工作。...它显示当用户点击底部导航栏图标,它们将被动画化并显示标签文本。当用户点击任何图标,颜色也会发生变化和动画。它将显示您的设备上。...textAlign; } 代码文件 import 'package:flutter/material.dart'; import 'package:flutter_animated_bottom/...这是我对用户交互自定义动画底部导航栏的一个小介绍。

    8.9K30

    Python 自动化指南(繁琐工作自动化)第二版:十三、使用 EXCEL 电子表格

    最后,您可以使用一个Workbook对象的active属性来获取工作簿的活动工作。活动工作 Excel 中打开工作簿位于顶层的工作。...您可以通过工作的title属性中存储一个新字符串来更改工作的名称。 每当您修改Workbook对象或其工作和单元格,电子表格文件将不会被保存,直到您调用save()工作簿方法。...工作簿中添加或删除工作后,记得调用save()方法保存更改。 将数值写入单元格 将值写入单元格非常类似于将值写入字典中的键。...在下一章,我们将看看如何使用 Python 另一个电子表格程序交互:流行的在线谷歌表格应用。...wb.sheetnames工作簿属性包含什么? 如何检索名为'Sheet1'的工作的Worksheet对象? 如何检索工作簿活动工作的Worksheet对象?

    18.3K53

    Flutter 中创建漂亮的底部导航栏

    ConvexBottomBar是一个底部导航栏组件,用于展现凸起的TAB效果,支持多种内置样式动画交互。你可以https://appbar.codemagic.app上找到在线样例。...运行下列代码,添加依赖 flutter pub add convex_bottom_bar environment: sdk: '>=2.12.0 <3.0.0' dependencies: flutter...: sdk: flutter cupertino_icons: ^1.0.2 convex_bottom_bar: ^3.0.0 我们使用 convax_bottom_bar 来创建一个非常...如何使用: 通常, 「ConvexAppBar」 可以通过设置它的 bottomNavigationBar 来脚手架一起工作。...AppBar的主题 提供Builder API以自定义新样式 AppBar上添加徽章 支持优雅的过渡动画 提供Hook API来重载一些内部样式 RTL布局支持 属性: 下面是 「*Convex_Bottom_Bar

    8K10

    Python 自动化指南(繁琐工作自动化)第二版:十四、使用谷歌表格

    EZSheets 处理这些模块的交互,所以您不需要关心它们如何工作。 获取证书和令牌文件 使用 EZSheets 之前,您需要为您的 Google 帐户启用谷歌表格和谷歌网盘 APIs。...要下载其他工作,您需要将Sheet对象的index属性更改为0。有关如何操作的信息,请参见第 341 页的创建和删除纸张。 下载函数都返回下载文件的文件名字符串。...然后,通过设置这些值,您可以更改工作的大小。...如果您愿意,您可以更改它们的index属性,以便在新的电子表格中对它们重新排序。 使用谷歌工作配额 因为谷歌表格是在线的,所以可以很容易地多个用户之间共享工作,这些用户可以同时访问工作。...什么代码将从标题为Student的工作中的单元格 B2 中读取数据? 如何找到 999 列的列字母? 如何找出一个工作有多少行和列? 如何删除电子表格?

    8.5K50

    BottomSheetDialog 使用详解,设置圆角、固定高度、默认全屏等

    其实细分来说,是BottomSheet、BottomSheetDialog、BottomSheetDialogFragment 2.BottomSheet 主界面同层级关系,可以事件触发,如果有设置显示高度的话...,也可以拉出来,且不会影响主界面的交互。...bottom sheet 3.BottomSheetDialog 可以看到弹出来之后是有一个半透明的蒙层的,这时候是影响主界面交互的,也就意味着此时BottomSheetDialog的优先级是要高于主界面的...看看效果 可以了,这下是直接就全屏了,但是向下拉的时候发现,并没有一次性收起,而是先停在了全屏显示的默认位置,我们再设置高度为全屏试试 behavior.peekHeight = 3000...实际高度可以自己计算 最终代码 override fun onStart() { super.onStart() //拿到系统的 bottom_sheet

    3.9K20

    Python从0到100(二十一):用Python读写Excel文件

    对象(工作sheet = wb.sheet_by_name(sheetnames[0])# 通过Sheet对象的nrows和ncols属性获取表单的行数和列数print(sheet.nrows, sheet.ncols...三、写Excel文件写入Excel文件可以通过xlwt 模块的Workbook类创建工作簿对象,通过工作簿对象的add_sheet方法可以添加工作,通过工作对象的write方法可以向指定单元格中写入数据...(Workbook)wb = xlwt.Workbook()# 创建工作对象(Worksheet)sheet = wb.add_sheet('一年级二班')# 添加表头数据titles = ('姓名'...此外,pandas库提供了更高级的数据分析功能,可以Excel文件进行交互,是数据科学和分析领域中不可或缺的工具。...index=False参数用于告诉pandas保存不包括行索引,从而使生成的Excel文件更加整洁。

    14710

    用 CoordinatorLayout 处理滚动

    snap:使用这一选项将由其决定在 view 只有部分减所执行的功能。如果滑动结束 view 的高度减少的部分小于原始高度的 50%,那么它将回到最初的位置。...创建视差动画 CollapsingToolbarLayout 可以让我们做出更高级的动画,例如使用一个折叠的同时可以渐隐的 ImageView。在用户滑动,标题的高度也可以改变。 ?...高级的底部表示例 有很多复杂的使用了 floating action button 的底部的例子,button 随着用户滑动或展开或收缩或改变状态。...Grafixartist Bottom Sheet Tutorial - 关于底部滑动如何定位 floating action button 以及对其使用动画的教程。...如果你使用 behavior 遇到了问题,请查看下面的建议: 关于如何高效使用 CoordinatorLayout 的例子请仔细参考 cheesesquare 源码。

    4.8K92

    Material Design — 底部动作条(Bottom Sheets)

    模态底部动作条(Modal bottom sheets) 主要用于移动设备,也可以展示其他app的深度链接的内容。 交互 只有当用户有发起的动作才出现。...可以用海拔来区分模态底部动作条持久底部动作条。模态底部动作条停留在比app内容更高的高度;而持久底部动作条app保持相同的海拔,并与其内容融为一体。...即使不常用,仍然要保持可见状态,并且需应用程序保持同一高度,并融入其内容。 用法 ·一个独特的表面上引入新内容 ·展示最主要的内容 ? 悬浮动作按钮搭配能纵向移动 ?...它们出现在其他UI元素之上,必须被关闭才能与底层内容交互。当一个模态底部动作条滑到屏幕上,屏幕的其余部分就会变暗,把焦点集中动作条上。 ?...当显示菜单项,完全扩展的模态底部动作条app 导航栏的最底端要保持最小8dp的距离。 ?

    1.9K71

    EXCEL VBA语句集300

    ) ‘将当前工作移至工作的最后 (23) Worksheets(Array(“sheet1”,”sheet2”)).Select ‘同时选择工作1和工作2 (24) Sheets(“sheet1...=ActiveWorkbook.FullName ‘页面设置的尾中输入文件路径 ActiveSheet.PageSetup.LeftFooter=Application.UserName ‘将用户名放置活动工作的页脚...=2 ‘更改工作中图表的图表区的颜色 (74) Sheets(“Chart2”).ChartArea.Interior.ColorIndex=2 ‘更改图表工作中图表区的颜色 (75) Charts.Add...,都会强制计算该函数 Application.Volatile False ‘只有该函数的一个或多个参数发生改变,才会重新计算该函数  定制模块行为 (101) Err.Clear...‘隐藏工作簿 Application.Visible = True ‘显示工作簿 注:可

    1.8K40

    超超长篇 - 手把手带你用python玩转Excel

    参数: - file_path (str): Excel 文件路径 - sheet_name (str or int): 工作名称或索引,默认读取第一个工作 返回:...参数: - file_path (str): Excel 文件路径 - sheet_name (str or int): 工作名称或索引,默认读取第一个工作 返回:...wb = openpyxl.Workbook() # 2、获取当前激活的工作 ws = wb.active # 3、给工作命名 ws.title = "Sheet1" # 4、保存工作簿 wb.save....xlsx") # 获取活跃的工作 ws = wb.active # 或者通过名称获取工作 ws = wb["Sheet1"] 写入数据到工作 # 写入单个单元格 ws['A1'] = "Hello...# 设置行高 (将第 1 行的高度设置为 30) sheet.row_dimensions[1].height = 30 # 设置行高 (将第 2 行的高度设置为 50) sheet.row_dimensions

    65310

    CSS(初级)笔记

    mozilla开发者文档里是这样描述的: 浏览器展现文档的时候,需要把文档内容和相应的样式信息结合起来展现。 浏览器先将HTML 和 CSS 转换成 DOM (文档对象模型)结构。...这时 DOM 就代表了电脑内存中的相应文档,因为它已经融合了文档内容和相应的样式 浏览器把 DOM 的内容展示出来 /*这是个注释*/ 插入样式的方法有三种: 外部样式(External style...sheet) 内部样式(Internal...可以通过下面这个公式将像素转换为em:px/16=em 链接样式 a:link - 正常,未访问过的链接 a:visited - 用户已访问过的链接 a:hover - 当用户鼠标放在链接上 a:active...更改内联元素和块元素 display:inline; display:block; Position(定位) static HTML 元素的默认值,即没有定位,遵循正常的文档流对象。

    1.1K30
    领券