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

Question

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

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

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以使其居中。
• 现在我们应该为Expanded Widget 赋予 child。
  • 对于第一个（左），我们没有任何东西可以显示，所以我添加了SizedBox 。
  • 对于第二个（右），我们需要CircularProgressIndicator 。 所以我添加了它。
• Expanded小部件将尝试使其子部件填充其内部空间。 所以CircularProgressIndicator将变成椭圆形。 我们可以通过使用Align Widget 来避免这种情况。

Answer 2

尝试这个：

Updated: 


import 'package:flutter/material.dart';

void main() => runApp(MyApp());


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyAppOne(),
    );
  }
}
class MyAppOne extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyAppOne>{

  bool show = false;
  @override
  Widget build(BuildContext context){
    return Scaffold(
      body:  Stack(
          alignment: Alignment.center,
          children: <Widget>[
            Container(
              alignment: Alignment.center,
              child: RaisedButton(
                onPressed: () {
                  setState(() {
                    show =!show;
                  });
                },
                child: Text('Show'),
              ),
            ),
           Positioned(
             right: MediaQuery.of(context).size.width * .20,
             child:  Container(
              alignment: Alignment.center,
              padding: EdgeInsets.all(10.0),
              child: show ? CircularProgressIndicator() : Container(),
            ),
           )
          ],
        )
      );
  }
}

Answer 3

Flutter 的 Column 和 Row 小部件有两个方便的属性，称为mainAxisAlignment和crossAxisAlignment 。 我假设由于您使用的是 Column 并且希望CircularProgressIndicator位于按钮的右侧，因此您可能想要使用crossAxisAlignment因为 Column 的横轴沿水平方向。

如果可能，请分享您的代码，以便更好地理解和支持该问题。