Flutter 中使用 TextField 和 Button 创建消息气泡答案

【问题标题】：Using TextField and Button to create a message bubble in FlutterFlutter 中使用 TextField 和 Button 创建消息气泡
【发布时间】：2021-10-07 21:29:37
【问题描述】：

Android Studio + Flutter

我在屏幕底部有一个 Row。

它包括 TextField 和 Button (Add)。

当 TextField 中有一些文本并且用户单击添加时，我希望它从左上角开始在容器内显示为气泡。

正确的做法是什么？我希望气泡像笔记应用一样累积，最终也可以滚动。

谢谢！

【问题讨论】：

标签： flutter android-studio button textfield flutter-dependencies

【解决方案1】：

尝试使用Snackbar Widget，它可以高度个性化。

Here's the documentation.

编辑。由于您希望在顶部有一个永久的气泡列表，我建议使用提供程序，这样当您单击按钮时，onTap 事件会验证数据并将数据添加到列表中（下面，myElements）。然后，直到顶部，只需添加一个Consumer 小部件，它会监听列表的变化（它会在每次发生变化时重建其子级）。在下面的示例代码中（我还没有测试过！）我使用 Expanded 小部件只是为了好玩，我在 Consumer 内部使用 ListView.builder 来显示您添加的元素列表，因为添加元素的数量可能很高。最后，我建议使用ListTile 或Card 或两者的组合，因为您想要像气泡一样美观的东西（您必须稍微调整一下设置）：

return ... (
child: Column(
  children: [
    Text("Some title..?"),
    Expanded(
      Consumer(
        builder: (ctx, myElements, _) => ListView.builder(
          itemCount: myElements.length,
          itemBuilder: (ctx, i) => ListTile(
            title: Text("You added ${myElements[i]}"),
            // something else...?
          ),
        ),
      ),
    ),
    Row( /* ... Text field + Button here... */),
  ],
),
// ...

【讨论】：

我实际上希望内容保留在那里，以便用户以后可以观察到；遗憾的是，Snackbar 对此无能为力。谢谢！