如何在 Flutter 中将小部件与另一个小部件对齐？

Question

我在一个RaisedButton小部件中有一个小Center部件，作为一个小部件中的一个Column小部件。我想在CircularProgressIndicator此按钮的右侧添加一个并在按下按钮时显示它。但是我想在显示进度条时让按钮居中。换句话说，我希望按钮始终位于中心并且进度条与此按钮对齐。

我试图在Row这里使用 a但这会按下按钮，它不再居中。

EDIT1：查看@Anil Chauhan提供的解决方案的结果（感谢您的回答）：

就像我之前说的那样，我尝试像他一样使用 Row，问题是在这种情况下，按钮不在屏幕中央，而是由进度条推动。我需要它留在它的行中间。

EDIT2： @Anil Chauhan编辑的答案现在适用于按钮为预定大小的特定情况。但是，如果按钮的大小根据文本的语言（在具有多种语言的应用程序中）而更改，则此解决方案将不起作用。

这就是我问的问题的原因：“如何将小部件与另一个小部件对齐”。因为如果可以的话，我就不必再担心按钮文本大小了。

在 Flutter 中处理这个问题的正确方法是什么？

Answer 1

class MyPage extends StatefulWidget {
  @override
  _MyPageState createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  bool _showIndicator = false;

  void _onButtonClicked() {
    setState(() {
      _showIndicator = !_showIndicator;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          children: <Widget>[
            const Expanded(child: SizedBox()),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 10.0),
              child: RaisedButton(
                child: Text("I am Too Big"),
                onPressed: _onButtonClicked,
              ),
            ),
            Expanded(
              child: _showIndicator
                  ? const Align(
                      alignment: Alignment.centerLeft,
                      child: CircularProgressIndicator(),
                    )
                  : const SizedBox(),
            ),
          ],
        ),
      ),
    );
  }
}

这是我的解释：

• 该RaisedButton尺寸是取决于它的孩子。如果你添加它，Row它会自动向左对齐（或开始）。
• Expanded小部件将填充小部件中的剩余空间Flex（Row&Column是 的子类Flex）。如果您添加多个Expanded小部件，它将平分。所以我Expanded在按钮的两侧添加了两个以使其居中。
• 现在我们应该给ExpandedWidget 的孩子。
  • 对于第一个（左），我们没有任何东西可以显示，所以我添加了SizedBox.
  • 对于第二个（右），我们需要CircularProgressIndicator. 所以我添加了它。
• 该Expanded控件将尽力使其子，以填补它的空间内。所以CircularProgressIndicator会变成椭圆形。我们可以通过使用AlignWidget来避免这种情况。