如何在flutter中将2个元素的行中仅一个元素居中

Question

在我的布局中，我连续有两个小部件，一个文本和一个图标。

如下所示，假定*表示图标，并使用“-”表示该行：

----------------------------
           Text          *  
----------------------------

如何使我的文本居中于整行，图标位于右端？

Answer 1

只需在左侧/右侧使用Expanded和Spacer小部件并将您的小部件放在Expanded：

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Spacer(),
    Text('Text'),
    Expanded(
      child: Text('*'),
      ),
    ),
  ],
),

结果：

Answer 2

您需要注意的主要事情是，如果您不想使用Stack它，则应该在左右两侧提供相同的占用宽度的小部件。

我会做到这一点无论Expanded和Padding

Row(
  children: <Widget>[
    Expanded(
      child: Padding(
        padding: const EdgeInsets.only(left: 32.0),
        child: Text(
          "Text",
          textAlign: TextAlign.center,
        ),
      ),
    ),
    Icon(Icons.add, size: 32.0,)
  ],
)

或具有Row的mainAxisAlignment与一 Container

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
    Container(width: 32.0, height: 0.0),
    Text("Text"),
    Icon(Icons.add, size: 32.0)
  ],
)

或用Expanded和Container在左侧而不是填充:)。考虑到Icon占用的空间，左侧的填充或额外容器使textAlign可以使文本真正位于行的中心。

Answer 3

1. 使用Row（虽然不是很灵活）

Row(
  children: <Widget>[
    Expanded(child: Center(child: Text('Center'))),
    Text("#"),
  ],
)

2.使用Stack（灵活）

Row(
  children: <Widget>[
    Expanded(child: Center(child: Text('Center'))),
    Text("#"),
  ],
)

Answer 4

我发现有必要使用 aStack来让 Text 真正居中：

Column(
  mainAxisSize: MainAxisSize.min,
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    Stack(
      alignment: Alignment.center,
      children: [
        Align(
          alignment: Alignment.center,
          child: Text('Text'),
        ),
        Align(
          alignment: Alignment.centerRight,
          child: Text('*'),
        )
      ],
    ),
  ],
);

Answer 5

出于灵活性原因，我建议使用扩展小部件：

       Row(
            children: [
              Expanded(flex: 1, child: Container()),
              Expanded(
                flex: 8,
                child: Text('Your Text',
                  textAlign: TextAlign.center,
                ),
              ),
              Expanded(flex: 1, child: IconButton(...))
            ],
          )