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

Flutter:如何将Textfield输入放到列表中以构建ListView.builder

Flutter是一种跨平台的移动应用开发框架,可以用于快速构建高性能、美观的移动应用程序。在Flutter中,可以使用TextField小部件来创建文本输入框,然后将输入的文本放入列表中以构建ListView.builder。

要将TextField输入放到列表中以构建ListView.builder,可以按照以下步骤进行操作:

  1. 导入所需的Flutter包:
代码语言:txt
复制
import 'package:flutter/material.dart';
  1. 创建一个包含TextField和ListView.builder的StatefulWidget小部件:
代码语言:txt
复制
class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  List<String> textList = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TextField列表示例'),
      ),
      body: Column(
        children: [
          TextField(
            onChanged: (text) {
              setState(() {
                textList.add(text);
              });
            },
          ),
          Expanded(
            child: ListView.builder(
              itemCount: textList.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(textList[index]),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}
  1. 在主函数中运行MyWidget小部件:
代码语言:txt
复制
void main() {
  runApp(MaterialApp(
    home: MyWidget(),
  ));
}

上述代码中,我们创建了一个包含TextField和ListView.builder的StatefulWidget小部件。在TextField的onChanged回调中,将输入的文本添加到textList列表中,并使用ListView.builder根据列表内容构建相应的列表项。

这样,当用户在TextField中输入文本时,文本将被添加到列表中,并且ListView.builder会根据列表内容动态构建相应的列表项。用户可以通过滚动列表来查看所有输入的文本。

推荐的腾讯云相关产品:腾讯云移动开发平台(https://cloud.tencent.com/product/mpp)

以上是关于如何将TextField输入放到列表中以构建ListView.builder的完善且全面的答案。

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

相关·内容

《深入浅出Dart》Flutter实战之TODO应用

现代JavaScript高级小册 深入浅出Dart 现代TypeScript高级小册 Flutter实战之TODO应用 在本篇文章,我们将构建一个TODO应用,使用最新的Dart语法和Flutter框架...让我们一步一步地构建这个TODO应用。 步骤 1:创建Flutter项目 首先,我们需要创建一个Flutter项目。...在build方法,我们使用Scaffold和ListView.builder来显示所有的任务,并为每个任务提供了标题、描述和完成状态的展示。...在initState方法,我们初始化了文本编辑器的控制器,并根据传入的任务初始化了相应的值。 在build方法,我们使用Scaffold和Column来显示标题、描述和完成状态的输入字段。...在终端,运行以下命令来启动应用程序: flutter run Flutter将在模拟器或设备上运行应用程序,并显示任务列表界面。

18820

setState

var textField = TextField( controller: new TextEditingController(text: this.text), keyboardType:...class _TodoListState extends State { var todo = {};//列表数据 var text;//当前输入文字 var showType = ShowType.all...状态量有三个:text 输入框的文字,todo列表数据,showType展现类型 1.输入框通过监听,改变text的值 2.在添加按钮点击时,将加入到状态值todo 3.todo用来渲染Todo列表...结语 本文到此接近尾声了,如果想快速尝鲜Flutter,《Flutter七日》会是你的必备佳品;如果想细细探究它,那就跟随我的脚步,完成一次Flutter之旅。...另外本人有一个Flutter微信交流群,欢迎小伙伴加入,共同探讨Flutter的问题,本人微信号:zdl1994328,期待与你的交流与切磋。

93920

flutter列表的性能优化

” “另请注意:虽然ListView.builder(默认情况下)有效地构建其子项,为您节省构建屏幕外小部件的不必要成本,但设置 shrinkWrap为true覆盖此默认行为!...使用 Slivers 的列表列表 下面的代码构建了与之前相同的 UI,但这次它使用Slivers 而不是收缩包装ListView对象。本页的其余部分将引导您逐步完成更改。...如何将嵌套列表迁移到 Slivers 第1步 首先,将最外面的 ListView 更改为SliverList. // Before @override Widget build(BuildContext...运行应用程序并注意 Flutter 不再需要立即渲染 100 个 ColorRow 小部件。当您滚动时,会动态构建更多小部件,正如您所期望的那样。...更好的是,一直滚动到下一个列表也不会产生任何特殊费用。 Flutter 会根据需要重新构建小部件,而且很快。

3.5K00

Flutter 数据持久化存储之Hive库

: hive_generator: build_runner:   在dependencies我添加了get和hive的库,在dev_dependencies添加了一个构建对象的依赖库。...控制器我们就放到GetX中使用,在page包下新建一个hive_controller.dart,代码如下所示: import 'package:flutter/material.dart'; import...这里面就需要用到baseEdit去构建两个输入框,因此我们加上GetX,在page包下新建一个hive_controller.dart,代码如下所示: import 'package:flutter/material.dart...下面我们通过在Terminal输入一行代码,生成对应的TypeAdapter对象类,代码如下所示: flutter packages pub run build_runner build 输入后回车,...如下图所示:   在列表的Item我们除了显示用户的名称和年龄之外还有两个功能按钮,分别用于修改和删除,如下图所示:   针对于删除很简单之后调用控制器里面写好的函数就可以了,删除之后列表会自动刷新的

10200

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

这时,一个简洁、清晰的文件列表就能够帮助我们快速解决这些问题。 本文将探索的内容 在本文中,我们将深入探讨如何使用Flutter构建一个简单而实用的文件列表。...根据按钮的点击状态,我们将显示列表视图或网格视图。 2. 构建网格视图 接下来,让我们来实现网格视图的布局。我们可以使用Flutter的GridView组件来展示文件列表。...为了解决这个问题,让我们来学习一下如何在Flutter处理文本溢出,确保文件名能够清晰可见。 1. 文本截断 我们可以使用Flutter的Text组件的overflow属性来处理文本溢出问题。...构建文件列表界面 最后,让我们在build方法构建文件列表界面,展示从API获取的文件列表数据。...现在,我们的文件列表已经可以动起来了!(GIF动不了啊)(又可以动了) 总结 在本文中,我们详细探讨了如何在Flutter应用构建文件列表,并逐步改进和优化这个文件列表提升用户体验和功能性。

17011

Flutter 旋转轮

在在本文中,我们将探讨 “Flutter 的旋转轮”。我们还将在flutter应用程序中使用「flutter_spinwheel」包来实现带有自定义选项的「Spinwheel」演示程序。...自旋轮有一些功能: 自动播放(启用/禁用) 长按暂停(启用/禁用) 尺寸调整 文字/图片支持 图像调整支持 顺时针和逆时针平移进行导航 触摸即可在先前平移的方向上导航 绘画定制改变外观 回调功能通知选定的项目...应该在构造函数处理它。 **shouldDrawBorder:**此属性用于确定是否应绘制边框。 **hideOthers:**此属性用于确定是否应绘制快门隐藏除选定以外的所有选项。...我们将创建由名称选择给出的动态列表列表。同样,我们将创建一个由名称select给定的整数。...**在此构建,我们将添加itemCount和itemBuilder。在itemBuilder,我们将导航容器小部件。在小部件内,我们将添加一个边距,即容器的高度。

8.7K20

UITableView在Flutter是什么?

这样的需求,在iOS是用UITableView实现的;而在Flutter,实现这种需求的则是列表控件ListView。...ListView 在Flutter,ListView可以沿一个方向(垂直或者水平方向)来排列其所有子Widget,因此常被用于需要展示一组连续视图元素的场景,比如通讯录、优惠券、商家列表等。...与 ListView.builder 抽离出了子Widget的构建方法 itemBuilder 类似,ListView.separated 抽离出了分割线的构建方法 separatorBuilder ,...一个有着封面头图的列表为例,我们希望封面头图和列表这两层视图的滚动联动起来,当用户滚动列表时,头图会根据用户的滚动手势,进行缩小与展开。...总结 在处理展示一组连续、可滚动的视图元素的场景Flutter提供了比原生Android、iOS系统更为强大的列表组件ListView与CustomScrollView。

5.5K10
领券