Flutter如何制作像UI一样的表格答案

【问题标题】：Flutter how to make table like UIFlutter如何制作像UI一样的表格
【发布时间】：2020-11-30 06:27:35
【问题描述】：

我是 Flutter 的新手，只想知道使用哪个小部件可以创建 UI，如下图所示。我尝试了Table，但后来我的Textfields 太大了，与文本不符。有什么帮助吗？谢谢！

 return Container(

      padding: EdgeInsets.all(20.0),

      child: Table(
       // border: TableBorder.all(color: non),
        children: [
          TableRow(

              children: [
            Text('Bizeps(l)'),
                SizedBox(
                  width: 20.0,

                  child: const Card(child: TextField()),
                ),

            Text('cm'),
            IconButton(icon: Icon(Icons.add_circle_outline)),
            IconButton(icon: Icon(Icons.remove_circle_outline)),

          ]),
          TableRow(children: [
            Text('Bizeps(l)'),
            SizedBox(
              width: 30.0,
              child: const Card(child: TextField()),
            ),

            Text('cm'),
            IconButton(icon: Icon(Icons.add_circle_outline)),
            IconButton(icon: Icon(Icons.remove_circle_outline)),
          ])
        ],
      ),);
    
  }

我的结果：

目标：

【问题讨论】：

标签： flutter user-interface flutter-layout

【解决方案1】：

您可以为表格设置defaultVerticalAlignment: TableCellVerticalAlignment.middle 以使文本与按钮对齐。要减小TextField 的大小，您可以设置它的高度和宽度。请记住，在 Goal 图片中没有 Card 包裹 TextFields。

Container(
        padding: EdgeInsets.all(20.0),
        child: Table(
          defaultVerticalAlignment: TableCellVerticalAlignment.middle, // this is new
          children: [
            TableRow(children: [
              Text(
                'Bizeps(l)',
              ),
              SizedBox(
                width: 20.0,
                height: 50.0, // this is new
                child: const Card(child: TextField()),
              ),
              Text('cm'),
              IconButton(icon: Icon(Icons.add_circle_outline)),
              IconButton(icon: Icon(Icons.remove_circle_outline)),
            ]),
            TableRow(children: [
              Text('Bizeps(l)'),
              SizedBox(
                width: 20.0,
                height: 50.0, // this is new
                child: const Card(child: TextField()),
              ),
              Text('cm'),
              IconButton(icon: Icon(Icons.add_circle_outline)),
              IconButton(icon: Icon(Icons.remove_circle_outline)),
            ])
          ],
        ),
      ),

【讨论】：

感谢对我帮助很大！这张卡片的提示很好:)

【解决方案2】：

将Column 与Rows 结合起来得到你的结果。

 Widget rowWidget() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text('Bizeps(l)'),
        TextField(),
        Text('cm'),
        IconButton(
          icon: Icon(Icons.add_circle_outline),
          onPressed: () {},
        ),
        IconButton(
          icon: Icon(Icons.remove_circle_outline),
          onPressed: () {},
        ),
      ],
    );
  }

  Widget columnWidget() {
    return Column(
      children: [
        rowWidget(),
        rowWidget(),
        rowWidget(),
      ],
    );
  }

【讨论】：