Flutter 通过拖动调整 TextField 大小

2024-01-08

有什么方法可以创建类似这些点的东西,这可以帮助扩展TextField.


截屏:

enter image description here

创建一个小部件。

class ExpandableTextField extends StatefulWidget {
  final double height;
  final double maxHeight;
  final double dividerHeight;
  final double dividerSpace;
  final Widget child;

  const ExpandableTextField({
    Key key,
    @required this.child,
    this.height = 44,
    this.maxHeight = 300,
    this.dividerHeight = 40,
    this.dividerSpace = 2,
  }) : super(key: key);

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

class _ExpandableTextFieldState extends State<ExpandableTextField> {
  double _height, _maxHeight, _dividerHeight, _dividerSpace;

  @override
  void initState() {
    super.initState();
    _height = widget.height;
    _maxHeight = widget.maxHeight;
    _dividerHeight = widget.dividerHeight;
    _dividerSpace = widget.dividerSpace;
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: _maxHeight,
      child: Column(
        children: <Widget>[
          SizedBox(
            height: _height,
            child: widget.child,
          ),
          SizedBox(height: _dividerSpace),
          Container(
            height: _dividerHeight,
            width: 60,
            child: GestureDetector(
              child: FittedBox(child: Text("----")),
              onPanUpdate: (details) {
                setState(() {
                  _height += details.delta.dy;

                  // prevent overflow if height is more/less than available space
                  var maxLimit = _maxHeight - _dividerHeight - _dividerSpace;
                  var minLimit = 44.0;

                  if (_height > maxLimit)
                    _height = maxLimit;
                  else if (_height < minLimit) 
                    _height = minLimit;
                });
              },
            ),
          )
        ],
      ),
    );
  }
}

像这样使用它:

ExpandableTextField(
  child: TextField(
    decoration: InputDecoration(hintText: "Enter a message"),
    maxLines: 100, // give any number, but make sure it is not small
  ),
)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Flutter 通过拖动调整 TextField 大小 的相关文章

随机推荐

  • 在 Matlab 中使用单个校准图像校正镜头畸变

    我想纠正一系列图像的镜头畸变 所有图像都是用固定在适当位置的相机拍摄的 并且还可以使用同一设置的棋盘图像 检测到扭曲的棋盘图像的角点后 我想计算径向扭曲系数 以便我可以校正图像 类似于估计相机参数 http www mathworks co
  • 检测设备是否有 GPS

    如何检测GPS是否可用 iPod touch 和 iPad WiFi 版本没有 GPS 它们有基于 WiFi 的其他功能 无论如何 如何知道 GPS 是否可用 或者如何检测 iPod Touch 或 iPad Wifi 型号 这是 iOS
  • 无法从源 Pylance 解析导入“flask”(reportMissingModuleSource)

    当我写作时 from flask import Flask 一条黄线即将出现flask并说明无法从源 Pylance 解析导入 flask reportMissingModuleSource 另外 我也能够成功地使用这个包完成工作 但问题是
  • 如何在 R闪亮中显示多个.xpt文件并根据它们的列过滤它们?

    当我尝试上传多个 xpt 文件以在 R闪亮应用程序的主面板中显示表格时 它给我带来了以下问题 我也在寻找过滤选项 我想在上传多个文件时按列进行过滤 以便在每个数据框 数据表的主面板中显示适当的行 Error Warning Error in
  • ORM 和构造函数

    我正在研究 NET ORM 实现 并且有一个重要的紧迫问题 是否有任何 NET ORM 实现不需要数据库中每个字段的公共属性 当我看到这样的例子时this https web archive org web 20090831053827 h
  • Objective-C - 使用 GDB 打印方法参数

    我正在努力使用 GDB 调试我的 Objective C 程序 我有一个函数 NSString reverse NSString someString我想调试它 我设置断点的方法如下 gdb break MyClass reverse 现在
  • 如果当前行包含字符串,如何打印文件中的下一行?

    我正在尝试编写一些内容来打印文件中的某些行 假设该文件如下所示 name 1 name a name 2 name b name 3 extra 1 name c name 4 extra 1 name d 所以通常我可以做if line
  • 如何将动态外部组件加载到 Angular 应用程序中

    我在 Angular 应用程序中遇到问题 我想要一个用 Typescript 编写的角度应用程序 aot 目的是显示带有一些小部件的用户仪表板 小部件是一个角度组件 我的应用程序附带了一些嵌入式小部件 但小部件应该通过市场之类的东西来扩展
  • Elasticsearch:为什么我的查询返回太多结果?

    我正在查询http elasticsearch myserver net 9200 my index foo 使用以下查询 query ids type foo values fff bar baz 但我收到的响应有 12 个命中 这是我的
  • 并行计算右侧的连续零位(尾随):解释?

    考虑这个链接 http graphics stanford edu seander bithacks html ZerosOnRightParallel来自 Bit Twiddling Hacks 网站 为了计算尾随位 使用以下算法 uns
  • 预期类型为“System.Int64”,但实际值的类型为“System.String”

    有时 我们应用程序的用户会收到此信息无效强制转换异常预期类型为 System Int64 但实际值的类型为 System String 我们无法重现这种情况 并且它发生在identityDataGrid 模型的 DataGrid Id 字段
  • 如何识别每个簇内的序列?

    使用作为一部分的 biofam 数据集TraMineR library TraMineR data biofam lab lt c P L M LM C LC LMC D biofam seq lt seqdef biofam 10 25
  • 分页库使数据源无效不起作用

    最近我正在尝试这个 我有一个由数据源支持的作业列表 我正在使用分页库 并且作业列表中的每个项目都有一个保存按钮 并且该保存按钮将数据库中作业的状态从未保存更新为已保存 反之亦然 一旦更新 它就会使数据源失效 现在失效应该会导致当前页面立即重
  • 如何将这个基于表格的布局转换为 CSS?

    我有一个基于表格的布局 高度 宽度为 100 没有滚动条 标题 红色 自动扩展以适应内容 但我不知道它会有多少像素 下面的流体表准确地给出了我的内容 table height 100 width 100 tr height 1 td Fit
  • 如何使用 StreamReader 和 StreamWriter 创建文件副本

    我需要使用 StreamReader 在控制台应用程序上读取 txt 文件 然后创建一个名称不同但内容相同的新文件或备份 问题是我无法弄清楚如何使用第一个文件中的内容放入新文件中 这是学校的事情 我是 C 新手 using System u
  • matplotlib `imshow(interpolation='nearest')` 有什么作用?

    I use imshow功能与interpolation nearest 在灰度图像上并得到一个漂亮的彩色图片 看起来它为我做了某种颜色分割 到底发生了什么 我也想得到类似的图像处理功能 numpy 数组上是否有一些函数 例如interpo
  • 毕加索图像不显示

    一张图像显示在我的应用程序上 另一张图像没有显示 但是都可以从浏览器访问 我的免费主机中的这个未显示在我的应用程序上 请注意 我可以从免费主机服务器看到图像 http www justedhak comlu com images uploa
  • Angular 指令隔离范围上的可选双向绑定

    question 我刚刚了解到您可以通过以下方式进行可选的 反向 或回调绑定 scope parentScopeFunc 我正在尝试查看是否有一种方法可以对双向绑定执行类似的操作 scope optional2WayBoundProp 我尝
  • 如何在 Spring MVC 中使用带注释的映射来实现不区分大小写的 URL

    我已经通过我的 spring mvc Web 应用程序很好地注释了映射 但是它们区分大小写 我找不到一种方法使它们不区分大小写 我很乐意在 Spring MVC 中实现这一点 而不是以某种方式重定向流量 Spring 4 2将支持不区分大小
  • Flutter 通过拖动调整 TextField 大小

    有什么方法可以创建类似这些点的东西 这可以帮助扩展TextField 截屏 创建一个小部件 class ExpandableTextField extends StatefulWidget final double height final