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

Question

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

我在这里尝试使用Row，但是这会按下按钮，因此不再居中。

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

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

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

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

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

感谢您的帮助。

Answer 1

尝试一下：

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 2

希望这会有所帮助。

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小部件给孩子。
  • 对于第一个（左），我们没有任何显示，因此我添加了SizedBox。
  • 对于第二个（右），我们需要CircularProgressIndicator。所以我添加了它。
• Expanded小部件将尝试使其子级填充其内部空间。因此，CircularProgressIndicator将变为椭圆形。我们可以通过使用Align小部件来避免这种情况。

Answer 3

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

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