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

Question

我想实现这个：

我是 Flutter 的新手，我正在尝试设计一些 UI 来学习；阅读文档我正在考虑通过使用 Column and Dividers 来实现这一点，但我不知道如何更改带有圆角边框、背景颜色和类似内容的列的样式+我不知道我应该使用哪个小部件用于文本。任何人都可以帮助我，也许可以给我一些例子吗？！

Answer 1

您可以使用 Card、ListView 和 ListTile 小部件来实现 UI 设计，而不是 Column 小部件。

Card - 为其 child.
ListView - 根据滚动方向将小部件加载为可滚动。
ListTile - ListView 的 build-in child 小部件。

找到下面的代码片段。

    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'),
          ),
        ],
      ),
    );

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

How can I create a details box with text and dividers in flutter

android

frameworks

ios

flutter

flutter-layout