flutter - 如何在App Center的左边/右边距中创建列？

Question

我是Flutter的新手。我几天前已经开始学习，并且正在尝试掌握“行和列”的概念。

我做了一个简单的页面，像this。

为了解释我的代码，我首先创建一个专栏将所有内容放入。
然后，我在TopBar中使用一行，然后在另一行中将其放入主体中，这样我就可以在Page的中心放置一列，在其两边都留有一点空间。然后，我将“文本”和“按钮”打包到“列”中，然后将其插入到页面中间的“列”中。

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
  home: MainPage(),
));


class MainPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    Color Color1 = const Color.fromRGBO(204, 126, 185, 100);
    Color Color2 = const Color.fromRGBO(140, 235, 203, 100);
    Color Color3 = const Color.fromRGBO(227, 225, 204, 100);
    Color Color4 = const Color.fromRGBO(89, 130, 145, 100);
    return Scaffold(
      body: Container(
        child: Column(
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.fromLTRB(20.0, 50.0, 0, 0),
                  child: SizedBox(
                    child: Image.asset('assets/MenuIcon.png'),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.fromLTRB(0, 50.0, 20.0, 0),
                  child: SizedBox(
                    child: Image.asset('assets/SearchIcon.png'),
                  ),
                ),
              ],
            ),
            Divider(height: 50,),
            Expanded(
              child: Row(
                children: <Widget>[
                  Expanded(
                    flex: 1,
                    child: Container(),
                  ),
                  Expanded(
                    flex: 5,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: <Widget>[
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              "Erwachsen werden",
                              style: TextStyle(
                                fontWeight: FontWeight.w200,
                                color: Colors.black,
                                fontSize: 28.0,
                              ),
                            ),
                            SizedBox(height: 10.0),
                            SizedBox(
                              width: double.infinity,
                              child: ButtonTheme(
                                minWidth: 300,
                                height: 70,
                                child: FlatButton(
                                  shape: new RoundedRectangleBorder(
                                      borderRadius: new BorderRadius.circular(13.0),
                                      ),
                                  onPressed: () {},
                                  color: Color1,
                                ),
                              ),
                            ),
                          ],
                        ),

                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              "Glückliches Leben",
                              style: TextStyle(
                                fontWeight: FontWeight.w200,
                                color: Colors.black,
                                fontSize: 28.0,
                              ),
                            ),
                            SizedBox(height: 10.0),
                            SizedBox(
                              width: double.infinity,
                              child: ButtonTheme(
                                minWidth: 300,
                                height: 70,
                                child: FlatButton(
                                  shape: new RoundedRectangleBorder(
                                      borderRadius: new BorderRadius.circular(13.0),
                                  ),
                                  onPressed: () {},
                                  color: Color2,
                                ),
                              ),
                            ),
                          ],
                        ),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              "Ab in das Leben",
                              style: TextStyle(
                                fontWeight: FontWeight.w200,
                                color: Colors.black,
                                fontSize: 28.0,
                              ),
                            ),
                            SizedBox(height: 10.0),
                            SizedBox(
                              width: double.infinity,
                                child: ButtonTheme(
                                  minWidth: 300,
                                  height: 70,
                                  child: FlatButton(
                                    shape: new RoundedRectangleBorder(
                                      borderRadius: new BorderRadius.circular(13.0),
                                    ),
                                    onPressed: () {},
                                    color: Color3,
                                  ),
                                )
                            ),
                          ],
                        ),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              "Alleine Leben",
                              style: TextStyle(
                                fontWeight: FontWeight.w200,
                                color: Colors.black,
                                fontSize: 28.0,
                              ),
                            ),
                            SizedBox(height: 10.0),
                            SizedBox(
                              width: double.infinity,
                              child: ButtonTheme(
                                minWidth: 300,
                                height: 70,
                                child: FlatButton(
                                  shape: new RoundedRectangleBorder(
                                      borderRadius: new BorderRadius.circular(13.0),
                                      ),
                                  onPressed: () {},
                                  color: Color4,
                                ),
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                  Expanded(
                    flex:1,
                    child: Container(),
                  ),
                ],
              ),
            ),

          ],
        ),
      ),
    );
  }
}

我觉得这里有很多不必要的编码，但是随着它的正常工作，我似乎无法对其进行改进。

有人可以帮助改善我的代码吗？
我要实现的只是在主体中间的一列，在屏幕左右两侧留有空白，没有一百万行代码。

Answer 1

默认情况下，Scaffold具有AppBar()参数，用于您的应用栏

并且根据您的布局，我建议您使用ListView()而不是Column()
如果页面长度延长，使用Listview将自动滚动页面
并且还有一个参数padding，您可以使用它在左侧和右侧添加空间

引用下面提到的代码结构

Scaffold(
  appbar: AppBar(),
  body: ListView(
           padding: EdgeInsets.only(left:12.0,right:12.0),
           children: <Widget>[
                   //your list of widgets here
                      ],
        )
)