我是 Flutter 新手。我几天前开始学习，并试图掌握行和列的概念。
我制作了一个简单的页面，例如 this .
为了解释我的代码，我首先创建一个列来放置所有内容。 然后我使用一个行作为顶部栏，然后使用另一个行将内容放入正文中，这样我就可以在页面的中心放置一个列，并在其两侧留出一些空间。然后，我将文本和按钮打包在一个列中，并将其插入到页面中间的列中。
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(),
),
],
),
),
],
),
),
);
}
}
我觉得有很多不必要的编码，但我似乎无法改进它，让它正常工作。
有人可以帮助改进我的代码吗？ 我想要实现的只是主体中间的一列，屏幕左侧和右侧的边距，而不需要一百万行代码。
最佳答案
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
],
)
)
关于flutter - 如何在应用程序中心创建具有左/右边距的列？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60165442/