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

Question

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

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

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

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

Answer 1

您需要注意的主要事情是，如果您不想使用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的{​​{1}}和mainAxisAlignment

Container

，或者在左侧加上Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ Container(width: 32.0, height: 0.0), Text("Text"), Icon(Icons.add, size: 32.0) ], ) 和Expanded而不是填充:)。考虑到Icon占用的空间，左侧的填充或多余容器是使textAlign真正使文本在行中居中的地方。

Answer 2

只需在左侧/右侧使用Expanded和Spacer小部件，然后将小部件放在Expanded内：

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

结果：

Answer 3

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

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

---

2。使用Stack （灵活）

IntrinsicHeight(
  child: Stack(
    children: [
      Align(child: Text('Center')),
      Positioned(right: 0, child: Text('#')),
    ],
  ),
)

Answer 4

我发现有必要使用Stack来使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('*'),
        )
      ],
    ),
  ],
);