主页 / 问题 / 1120398
Accepted
Mykyta FL
Asked:2020-05-05 04:26:46 +0000 UTC2020-05-05 04:26:46 +0000 UTC

如何在 Row 中定位元素？

  • 772

是否有某种方法可以对齐中间元素（时间），使其在每个图块中处于同一水平？

在此处输入图像描述

编码：

                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Align(
                      alignment: Alignment.bottomLeft,
                      child: Text(
                        element['deadline'],
                        style: TextStyle(
                          color: element['overdue'] ? Colors.redAccent : null,
                          fontWeight: FontWeight.bold
                        ),
                      ),
                    ),

                    Align(
                      alignment: Alignment.bottomCenter,
                      child: Text(element['estimate'], style: TextStyle(color: Colors.blueAccent),),
                    ),
                    Align(
                      alignment: Alignment.bottomRight,
                      child: Text(element['stage_id']),
                    ),

                ],),

更新：

child: Container(
                    padding: EdgeInsets.all(10),
                    child: Row(
                      children: <Widget>[
                        Expanded(
                          flex: 3,
                          child: Text(
                            element['deadline'],
                            style: TextStyle(
                                color: element['overdue']
                                    ? Colors.redAccent
                                    : null,
                                fontWeight: FontWeight.bold),
                            textAlign: TextAlign.left
                          ),
                        ),
                        Expanded(
                          flex: 2,
                          child: Text(
                            element['estimate'],
                            style: TextStyle(color: Colors.blueAccent),
                            textAlign: TextAlign.right
                          ),
                        ),
                        Expanded(
                          flex: 4,
                          child: Text(element['stage_id'], textAlign: TextAlign.right,),
                        ),
                      ],
                    ),
                  ),
listview

1 个回答

  1. Best Answer

    您只需要正确Container放置和padding编辑。还有Expanded一个flex, 您可以使用它更改元素之间的空格。

    Container(
  padding: EdgeInsets.all(10),
  child: Row(
    children: <Widget>[
      Expanded(
        child: Text(
          element['deadline'],
          style: TextStyle(
              color: element['overdue'] ? Colors.redAccent : null,
              fontWeight: FontWeight.bold),
        ),
      ),
      Expanded(
        child: Text(
          element['estimate'],
          style: TextStyle(color: Colors.blueAccent),
        ),
      ),
      Expanded(
        child: Text(element['stage_id']),
      ),
    ],
  ),
),
    • 0

相关问题