如何在 Flutter 中构造表格数据答案

【问题标题】：How to structure table data within Flutter如何在 Flutter 中构造表格数据
【发布时间】：2020-04-27 22:52:20
【问题描述】：

我目前正在尝试在我的代码中创建一个类似表格的结构，并且确信有一种更简单的方法可以完成此操作，而不是我已经尝试过的那种体积庞大且结果不正确的方法。

SingleChildScrollView(
    scrollDirection: Axis.vertical,
    child: Stack(
      children: <Widget>[
        Container(
          width: double.infinity,
          height: 750,
          child: Stack(
            children: <Widget>[
              Positioned(
                right: 0,
                top: 0,
                left: 0,
                child: Padding(
                  padding: const EdgeInsets.only(
                    left: 20.0,
                    top: 20.0,
                  ),
                  child: Padding(
                    padding: const EdgeInsets.only(top: 8.0),
                    child: Text(
                      'How much should I charge?',
                      textAlign: TextAlign.left,
                      style: TextStyle(
                        fontSize: 20.0,
                        fontFamily: 'OpenSans',
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
        Positioned(
          top: 60,
          right: 90,
          left: 0,
          child: Padding(
            padding: const EdgeInsets.only(bottom: 10.0),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Text(
                  'Currency used for this campaign: USD\$',
                  style: TextStyle(
                    fontFamily: 'OpenSans',
                    fontSize: 14.0,
                  ),
                ),
              ],
            ),
          ),
        ),
        Positioned(
          top: 90.0,
          left: 3.0,
          right: 3.0,
          child: Padding(
            padding: const EdgeInsets.only(left: 20.0, right: 20.0),
            child: Divider(
              height: 10.0,
              color: Colors.black45,
            ),
          ),
        ),
        Positioned(
          top: 95.0,
          left: 3.0,
          right: 3.0,
          child: Row(
            children: <Widget>[
              Row(
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.only(left: 30.0, right: 30.0),
                    child: Text(
                      'IN-FEED POSTS',
                      style: TextStyle(
                          fontSize: 18,
                          color: Colors.deepPurpleAccent,
                          fontFamily: 'OpenSans',
                          fontWeight: FontWeight.bold),
                    ),
                  ),
                ],
              ),
              Container(
                  height: 60,
                  child: VerticalDivider(color: Colors.black45)),
            ],
          ),
        ),
        Positioned(
          top: 125.0,
          left: 3.0,
          right: 3.0,
          child: Row(
            children: <Widget>[
              Row(
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.only(left: 30.0, right: 30.0),
                    child: Text(
                      'Followers per account',
                      style: TextStyle(
                        fontSize: 14,
                        fontFamily: 'OpenSans',
                      ),
                    ),
                  )
                ],
              ),
              Container(
                  height: 60,
                  child: VerticalDivider(color: Colors.black45)),
            ],
          ),
        ),
      ],
    ),
  ),

这是迄今为止我使用此代码策略获得的最终结果。任何人都可以提出另一种策略吗？

【问题讨论】：

标签： flutter flutter-layout flutter-dependencies

【解决方案1】：

我认为最简单的方法是使用行和列。

我不在电脑前，你可以试试这样的！

Column
   Text,
   Text,
    Row
        Container -> border.only 
             Column
                   Text
                   Text
        Container -> border.only
              Column
                   Text
                   Text

希望对您有所帮助。

【讨论】：

【解决方案2】：

我已经使用TableRow 制作了一个解决方案，其结构与Simone 的 非常相似。

请看下面...

Container(
    padding: EdgeInsets.all(10),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        Padding(
          padding: EdgeInsets.only(top: 5),
          child: Text(
            'How much should I charge?',
            textAlign: TextAlign.left,
            style: TextStyle(
              fontSize: 20.0,
              fontFamily: 'OpenSans',
            ),
          ),
        ),
        Padding(
          child: Text(
            'Currency used for this campaign: USD\$',
            style: TextStyle(
                fontFamily: 'OpenSans', fontSize: 14.0, color: Colors.grey),
          ),
          padding: EdgeInsets.only(bottom: 10),
        ),
        Container(
          child: Table(
            border: TableBorder(
              top: BorderSide(width: 2, color: Colors.grey.shade300),
              verticalInside:
                  BorderSide(width: 1, color: Colors.grey.shade300),
            ),
            children: [
              TableRow(
                children: [
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: <Widget>[
                      Padding(
                        child: Text(
                          'IN-FEED POSTS',
                          style: TextStyle(
                            fontSize: 18,
                            color: Colors.pinkAccent,
                            fontFamily: 'OpenSans',
                          ),
                        ),
                        padding: EdgeInsets.only(top: 10),
                      ),
                      Padding(
                        child: Text(
                          'Followers per account',
                          style: TextStyle(
                            fontSize: 14,
                            fontFamily: 'OpenSans',
                          ),
                        ),
                        padding: EdgeInsets.only(bottom: 10),
                      ),
                    ],
                  ),
                  Container(
                    child: Column(children: <Widget>[
                      Padding(
                        child: Text(
                          'Another text...',
                          style: TextStyle(
                            fontSize: 18,
                            color: Colors.black,
                            fontFamily: 'OpenSans',
                          ),
                        ),
                        padding: EdgeInsets.only(top: 10),
                      ),
                    ]),
                  ),
                ],
              ),
            ],
          ),
        ),
      ],
    ),
  ),

【讨论】：