如何在颤动中创建带有文本和分隔符的详细信息框

Posted 2023-02-22

【中文标题】如何在颤动中创建带有文本和分隔符的详细信息框

【英文标题】：How can I create a details box with text and dividers in flutter

【发布时间】：2021-06-24 14:57:33

【问题描述】：

我想实现这个：

我是 Flutter 的新手，我正在尝试设计一些 UI 来学习；阅读文档我想通过使用Column 和Dividers 来实现这一点，但我不知道如何用圆角边框、背景颜色和类似的东西更改列的样式+我不知道哪个小部件我应该使用文本。谁能帮帮我，也许给我一些例子？！

【参考方案1】：

您可以使用Card、ListView 和ListTile 小部件来代替Column 小部件来实现UI 设计。

Card - 为其子项提供圆角边框。 ListView - 根据滚动方向将小部件加载为可滚动的。 ListTile - ListView 的内置子小部件。

在下面找到代码 sn-p。

    return Card(
      margin: EdgeInsets.all(5.0),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
      color: Colors.grey.withOpacity(0.25),
      child: ListView(
        scrollDirection: Axis.vertical,
        children: [
          ListTile(
            title: Text('Title'),
            subtitle: Text('Subtitle'),
          ),
          Divider(),
          ListTile(
            title: Text('Title'),
            subtitle: Text('Subtitle'),
          ),
          Divider(),
          ListTile(
            title: Text('Title'),
            subtitle: Text('Subtitle'),
          ),
          Divider(),
          ListTile(
            title: Text('Title'),
            subtitle: Text('Subtitle'),
          ),
          Divider(),
          ListTile(
            title: Text('Title'),
            subtitle: Text('Subtitle'),
          ),
          Divider(),
          ListTile(
            title: Text('Title'),
            subtitle: Text('Subtitle'),
          ),
          Divider(),
          ListTile(
            title: Text('Title'),
            subtitle: Text('Subtitle'),
          ),
        ],
      ),
    );

【讨论】：

感谢几乎我所需要的，我试过了，但我收到错误“RenderBox 未布置”。我做了一个小研究，并尝试在 ListView 中添加 shrinkWrap: true。它有效，但列表不再滚动。有什么建议吗？

我刚刚添加了 ListTile 小部件以填充屏幕高度。如果要使其可滚动，可以在 ListView.children 属性中添加更多 ListTile 小部件。