flutter - 如何在应用程序中心创建具有左/右边距的列？

问题描述

我是 Flutter 的新手。几天前我开始学习并试图掌握行和列的概念。

我做了一个这样的简单页面。

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

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(),
                  ),
                ],
              ),
            ),

          ],
        ),
      ),
    );
  }
}

我觉得有很多不必要的编码，但我似乎无法改进它，让它正常工作。

任何人都可以帮助改进我的代码吗？简单地说，我想要实现的是在正文中间有一个列，屏幕左右有边距，没有一百万行代码。

标签： flutterdart

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

并且根据您的布局，我会建议使用ListView()而不是Column()

如果您的页面长度延长， usingListview将自动滚动您的页面，并且还有一个参数 as paddingusing 您可以在左侧和右侧添加空间

参考下面提到的代码结构

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

flutter - 如何在应用程序中心创建具有左/右边距的列？

问题描述

解决方案

推荐阅读