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

Question

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

所以基本上我只是尝试在中心有一个Row(Image和) ，在底部有一个(2和 a ) 但我无法用and甚至and来实现这一点。当我尝试使用包含 3 个小部件时，它只是没有底部对齐。 当我尝试使用它时也不起作用TextColumnTextButtonRichTextAlignStackColumnmainAxisAlignmentmainAxisAlignement Column
StackAlign

也许我不应该用作Column脚手架的主体？但我不知道如果是的话我应该用什么来代替它。小部件的任何帮助或解释都会有所帮助。

这是我的完整代码

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

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

如果您想将其yourWidget置于扩展区域的中心，您可以将其再次包裹起来Center(child: yourWidget)