颤振如何在列中明智地显示容器行

Question

我在一列中有3个容器，我需要在屏幕上的中间显示第一个2个容器，在最后一个显示第3个容器

类似这样的东西

我的代码是这个

return Container(
                child: Column(
                  children: <Widget>[
                    Container(
                        width: stackWidth * 0.75,
                        child: Image.asset('assets/logo.png')),
                    Container(
                      color: Color(0xffff4b4b),
                      child: Padding(
                          padding: EdgeInsets.all(5),
                          child: Text(
                            'Only for LunchBox management',
                            style: TextStyle(color: Colors.white, fontSize: 18),
                          )),
                    ),
                    Container(
                      child: Padding(
                          padding: EdgeInsets.all(5),
                          child: Text(
                            'Powered by LunchBox KSA',
                            style: TextStyle(color: Colors.white, fontSize: 18),
                          )),
                    )
                  ],
                ),
              );

它在列中显示，但是我需要在中间显示列的前2个容器，在最后显示第三个容器

Answer 1

您可以执行以下操作：

return Container(
            child: Column(
              children: <Widget>[
                const Spacer(),  // <---- New
                Container(
                    width: stackWidth * 0.75,
                    child: Image.asset('assets/logo.png')),
                Container(
                  color: Color(0xffff4b4b),
                  child: Padding(
                      padding: EdgeInsets.all(5),
                      child: Text(
                        'Only for LunchBox management',
                        style: TextStyle(color: Colors.white, fontSize: 18),
                      )),
                ),
                const Spacer(), // <---- New
                Container(
                  child: Padding(
                      padding: EdgeInsets.all(5),
                      child: Text(
                        'Powered by LunchBox KSA',
                        style: TextStyle(color: Colors.white, fontSize: 18),
                      )),
                )
              ],
            ),
          );

Answer 2

请使用此！

return Scaffold(
      backgroundColor: Colors.black,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Container(
              color: Colors.white,
              width: MediaQuery.of(context).size.width * 0.75,
              height: 80,
              alignment: Alignment.center,
              child: Text(
                "YOUR LOGO",
                style: Theme.of(context).textTheme.headline6,
              ),
            ),
            SizedBox(height: 10),
            Container(
              color: Color(0xffff4b4b),
              child: Padding(
                  padding: EdgeInsets.all(5),
                  child: Text(
                    'Only for LunchBox management',
                    style: TextStyle(color: Colors.white, fontSize: 18),
                  )),
            ),
          ],
        ),
      ),
      bottomNavigationBar: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Container(
            child: Padding(
                padding: EdgeInsets.all(20),
                child: Text(
                  'Powered by LunchBox KSA',
                  style: TextStyle(color: Colors.white, fontSize: 18),
                )),
          ),
        ],
      ),
    );

Answer 3

\ **

• 可能对您有帮助

**

body: Container(
          child: Column(
              children: [
             Expanded(
            flex: 0,
            child: Container(
              height: 80,
              color: Colors.green,
            )),
        Expanded(
            flex: 2,
            child: Container(
              height: 150,
              color: Colors.white,
              child: Image.asset("assets/github.png"),
            )),
        Expanded(
            flex: 0,
            child: Container(
              height: 80,
              color: Colors.deepOrange,
              child: Align(
                  alignment: Alignment.bottomCenter,
                  child: Padding(
                      padding: EdgeInsets.all(8),
                      child: Text(
                        "Git Hub Power",
                        style: TextStyle(color: Colors.white, fontSize: 25),
                      ))),
            )),
      ],
    ),
  ),