flutter - 有没有办法将小部件对齐到 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 与包含 Stack 的 Expanded 子项一起使用。使用 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(...),
[...]