Question

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

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

我的结果：

目标：

Answer 1

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

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

Answer 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(),
      ],
    );
  }

颤抖如何使表格像UI

2 个答案: