有没有办法将小部件与Flutter中最右边的一行对齐？

Question

我在Flutter中有两行小部件。我试图让第一个小部件居中在屏幕中间，第二个小部件强制到屏幕的最右侧。

我尝试过使用Spacer（）。这导致应用程序返回空白屏幕。

我也尝试过使用Expanded。这会将第二个小部件完全从屏幕上发送出去。

尝试mainAxisAlignment：MainAxisAlignment.spaceBetween似乎没有任何效果。

@override
  Widget build(BuildContext context) {
    return new Container(
      height: MediaQuery.of(context).size.height,
      child: SingleChildScrollView(
        child: new Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            new Container(
              child: new GestureDetector(
                onTap: () {
                  FocusScope.of(context).requestFocus(new FocusNode());
                },
                child: Column(
                  children: <Widget>[
                    SizedBox(height: 40.0),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        new Column(
                          children: <Widget>[
                            new Container(
                              child: Row(
                                mainAxisAlignment:MainAxisAlignment.spaceBetween,
                                children: <Widget>[
                                  Container(),
                                  Container(
                                    child: Text(
                                      'Profile',
                                      textAlign: TextAlign.center,
                                      style: TextStyle(
                                        fontFamily: 'Lato',
                                        color: Colors.white,
                                        fontSize: 50.0,
                                        fontWeight: FontWeight.w700,
                                      ),
                                    ),
                                  ),
                                  Container(
                                    child: IconButton(
                                      icon: Icon(
                                        Icons.settings,
                                        color: Colors.white,
                                        size: 30.0,
                                      ),
                                      onPressed: () {
                                        Navigator.push(
                                          context,
                                          MaterialPageRoute(
                                            builder: (context) => OnBoarding()),
                                        );
                                      }),
                                  ),
                                ]),
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),

Answer 1

你可以使用Row和一个包含Expanded的Stack孩子。使用Center将文本居中，并使用Positioned定位图标，如下所示：

[...]
child: Column(
  children: <Widget>[
    SizedBox(height: 40.0),
    Row(
      children: <Widget>[
        Expanded(
          child: Stack(
            children: [
              Center(
                child: Text(...),
                ),
              ),
              Positioned(
                right: 8,
                child: IconButton(...),
[...]

Answer 2

您是否尝试将行的mainAxisAlignment设置为mainAxisAlignment.center？

Answer 3

使用具有以下结构的行：

Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: <Widget>[
      Container(),
      Container(
        child: Text(
      'Profile',
      textAlign: TextAlign.center,
      style: TextStyle(
        fontFamily: 'Lato',
        color: Colors.white,
        fontSize: 50.0,
        fontWeight: FontWeight.w700,
        ),
      ),
    ),
    Container(
    child:  IconButton(
      icon: Icon(
        Icons.settings,
        color: Colors.white,
        size: 30.0,
        ),
      ),
    ),  
  ]
),

会发生什么是spaceBetween属性将在行中的小部件之间平均划分可用空间，所以我放了一个空的Container，这将强制Text小部件位于行的中间，而IconButton位于远端你渴望。

我注意到在你的代码片段中你有一个带有单个Column的Row，它还包含一个Column，你应该消除这种冗余以优化你的代码并使其更容易调试：