Flutter：如何在中心对齐一个小部件，在底部对齐一些小部件

Question

我对 Flutter 很陌生，我试图实现这个观点：

所以基本上我只是尝试在中心有一个Row（Image 和Text），在底部有一个Column（2 TextButton 和一个RichText），但我无法做到这一点Align 和 Stack 甚至 Column 和 mainAxisAlignment。 当我尝试使用包含 3 个小部件的 mainAxisAlignement Column 时，它只是没有底部对齐。
当我尝试将Stack 与Align 一起使用时，它也不起作用

也许我不应该使用 Column 作为 Scaffold 的主体？但我不知道如果是这样我应该用什么来替换它。小部件的任何帮助或解释都会有所帮助。

这是我的完整代码

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0;

  //color
  final textColorContainer = new Container(color: const Color(0xffff62fa));
  final pinkColorContainer = new Container(color: const Color(0xffffe3fe));
  final bottomAppBarContainer = new Container(color: const Color(0xfff5f5f5));

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
      body: Column(
          // Center is a layout widget. It takes a single child and positions it
          // in the middle of the parent.
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Image.asset('assets/pictalio_logo.png'),
                Text("Pictalio",
                    style: TextStyle(
                        fontFamily: "Sen",
                        fontWeight: FontWeight.w700,
                        fontSize: 30))
              ],
            ),
            Stack(
              children: <Widget>[
                Align(
                  alignment: Alignment.bottomCenter,
                  child: Container(
                      margin: EdgeInsets.symmetric(horizontal: 10.0),
                      width: double.infinity,
                      child: TextButton(
                        child: Text('Signup with my email',
                            style: TextStyle(fontWeight: FontWeight.w700)),
                        style: TextButton.styleFrom(
                          backgroundColor: pinkColorContainer.color,
                          primary: textColorContainer.color,
                          shape: const BeveledRectangleBorder(
                              borderRadius:
                                  BorderRadius.all(Radius.circular(5))),
                        ),
                        onPressed: () {
                          print('Pressed');
                        },
                      )),
                ),
                Align(
                  alignment: Alignment.bottomCenter,
                  child: Container(
                      margin: EdgeInsets.symmetric(horizontal: 10.0),
                      width: double.infinity,
                      child: TextButton(
                        child: Text('Signup with my google',
                            style: TextStyle(fontWeight: FontWeight.w700)),
                        style: TextButton.styleFrom(
                          backgroundColor: pinkColorContainer.color,
                          primary: textColorContainer.color,
                          shape: const BeveledRectangleBorder(
                              borderRadius:
                              BorderRadius.all(Radius.circular(5))),
                        ),
                        onPressed: () {
                          print('Pressed');
                        },
                      )),
                ),
                Align(
                  alignment: Alignment.bottomCenter,
                  child: RichText(
                    text: TextSpan(
                      text: "Already have an account?",
                      style: TextStyle(
                          color: Colors.black, fontWeight: FontWeight.w700),
                      children: <TextSpan>[
                        TextSpan(
                            text: ' Sign in!',
                            style: TextStyle(
                                color: textColorContainer.color,
                                fontWeight: FontWeight.w700)),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ]),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
              icon: Icon(Icons.videocam_sharp), label: "video"),
          BottomNavigationBarItem(
            icon: Icon(Icons.add_box_rounded),
            label: 'Add',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.notifications),
            label: 'Notification',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.account_circle),
            label: 'Account',
          ),
        ],
        showSelectedLabels: false,
        showUnselectedLabels: false,
        currentIndex: _selectedIndex,
        selectedItemColor: pinkColorContainer.color,
        unselectedItemColor: Colors.black,
        type: BottomNavigationBarType.fixed,
        backgroundColor: bottomAppBarContainer.color,
        onTap: _onItemTapped,
      ),
    );
  }
}

Answer 1

使用Column 并用Expand(child: yourWidget) 包裹第一个孩子。这会扩展第一个孩子以占用尽可能多的空间，并将后面的孩子放在底部。

如果您想将yourWidget 置于展开区域的中心，您可以再次使用Center(child: yourWidget) 包裹它

Answer 2

假设您有两个Container，其中一个在中心，一个在底部。你需要用Stack 包裹这两个。首先用Center 包裹，因为你想要第一个在中心。你可以用Align 包裹第二个，但底部有多个Containers，所以用Column 包裹底部Containers 并添加mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.end,。我更改了您的代码，这可能会起作用。

      body: Stack(
    children: [
      Center(
        child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [
          Image.asset(
            'assets/pictalio_logo.png',
            width: 100,
          ),
          Text(
            "Pictalio",
            style: TextStyle(
                fontFamily: "Sen",
                fontWeight: FontWeight.w700,
                fontSize: 30),
          ),
        ]),
      ),
      Column(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          Container(
              margin: EdgeInsets.symmetric(horizontal: 10.0),
              width: double.infinity,
              child: TextButton(
                child: Text('Signup with my email',
                    style: TextStyle(fontWeight: FontWeight.w700)),
                style: TextButton.styleFrom(
                  backgroundColor: pinkColorContainer.color,
                  primary: textColorContainer.color,
                  shape: const BeveledRectangleBorder(
                      borderRadius: BorderRadius.all(Radius.circular(5))),
                ),
                onPressed: () {
                  print('Pressed');
                },
              )),
          Container(
              margin: EdgeInsets.symmetric(horizontal: 10.0),
              width: double.infinity,
              child: TextButton(
                child: Text('Signup with my google',
                    style: TextStyle(fontWeight: FontWeight.w700)),
                style: TextButton.styleFrom(
                  backgroundColor: pinkColorContainer.color,
                  primary: textColorContainer.color,
                  shape: const BeveledRectangleBorder(
                      borderRadius: BorderRadius.all(Radius.circular(5))),
                ),
                onPressed: () {
                  print('Pressed');
                },
              )),
          RichText(
            text: TextSpan(
              text: "Already have an account?",
              style: TextStyle(
                  color: Colors.black, fontWeight: FontWeight.w700),
              children: <TextSpan>[
                TextSpan(
                    text: ' Sign in!',
                    style: TextStyle(
                        color: textColorContainer.color,
                        fontWeight: FontWeight.w700)),
              ],
            ),
          ),
        ],
      )
    ],
  )