Question

我在flutter中有一行，其中包含2个文本小部件，我想在该行的开头添加一个文本小部件，然后在末尾添加一个文本小部件：

这是我的代码：

  Row(
                            children: <Widget>[
                              Text(
                                "eshiett1995",
                                textAlign: TextAlign.left,
                                style: TextStyle(fontWeight: FontWeight.bold),
                              ),
                              Padding(padding: EdgeInsets.only(right: 10.0),),
                              Text(
                                "4:33am",
                                textDirection: TextDirection.ltr,
                                textAlign: TextAlign.left,
                                style: TextStyle(fontWeight: FontWeight.bold),
                              )

                            ],
                          ),

目前这就是我的代码的外观：

我希望eshiett1995停留在开始时间，而凌晨4:33则移到结尾

Answer 1

您只需要添加Row属性mainAxisAlignment: MainAxisAlignment.spaceBetween,。

您可以删除Padding。

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  //mainAxisSize: MainAxisSize.max,
  children: <Widget>[
    Text(
      "eshiett1995",
      textAlign: TextAlign.left,
      style: TextStyle(fontWeight: FontWeight.bold),
    ),
    Text(
      "4:33am",
      textDirection: TextDirection.ltr,
      textAlign: TextAlign.left,
      style: TextStyle(fontWeight: FontWeight.bold),
    )
  ],
),

Answer 2

您还可以在第二个Expanded中以正确对齐的方式使用Text

Row(
                        children: <Widget>[
                          Text(
                            "eshiett1995",
                            textAlign: TextAlign.left,
                            style: TextStyle(fontWeight: FontWeight.bold),
                          ),
                          Expanded(
                              child: Text(
                            "4:33am",
                            textDirection: TextDirection.ltr,
                            textAlign: TextAlign.right,
                            style: TextStyle(fontWeight: FontWeight.bold),
                          ))
                        ],
                      )

Answer 3

您可以使用 Spacer() 小部件将另一个小部件推送到行尾。

Row(children:[Text("Some Data"), Spacer(), Text("Some Data")]),

这将为您提供所需的输出，而无需设置任何其他对齐

Answer 4

您尝试过Spacer类吗？ https://docs.flutter.io/flutter/widgets/Spacer-class.html

在两个文本之间添加Spacer小部件。

Answer 5

您已获取行小部件。您只需要设置一个名为的属性。添加另一个小部件可能会增加不必要的复杂性。

mainAxisAlignment: MainAxisAlignment.spaceBetween,

仅需添加行以上属性。

Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    title,
                    style: TextStyle(
                        color: Colors.black54,
                        fontSize: 18.0,
                        fontWeight: FontWeight.w500),
                  ),
                  Text(
                    price,
                    softWrap: true,
                  )
                ],
              ),
              RaisedButton(
                color: Colors.amberAccent[100],
                onPressed: () {},
                child: Text("Buy"),
              )
            ],
          )

输出：

Answer 6

您可以使用AxisAlignment或SizedBox分隔最左侧和最右侧的两个文本。

如何在flutter中将同一行中的2个文本小部件与行的开头和结尾对齐？

6 个答案: