如何解决如何在Flutter中的行之间增加空间?
主要问题是我想在行之间添加一些空间,而这些行是SingleChildScrollView
(我的小部件树)的子级:
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,children: <Widget>[
Row(
// first row with 3 column
mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: <Widget>[
Container(),Container(),],),Row(
// second row also with 3 column ans so on
mainAxisAlignment: MainAxisAlignment.spaceEvenly,//Row( third row also with 3 column ans so on
//Row( fourth row also with 3 column ans so on
// ....
],
我提出了以下建议:
那么如何为小部件SingleChildScrollView
添加更多空间,从而期望mainAxisAlignment:MainAxisAlignment.spaceBetween
在行之间放置一些空间,或者如何简单地在行之间添加空间?
解决方法
如果您对固定的像素间隙感到满意,那么SizedBox
之类的东西就很好用。 Spacer
是另一种选择,它是灵活的,取决于您嵌套的内容,它可能是也可能不是您想要的。如果您更喜欢使用相对大小,我还建议您使用FractionallySizedBox
,它可以在一定面积上运行,并且非常适合响应式设计。例如,如果您希望垂直间隙为5%,则可以表示为:
FractionallySizedBox(heightFactor: 0.05),
,
插入php artisan config:cache
小部件。
Padding
,
Row(...),SizedBox(width:20). // If want horizontal space use width for vertical use height
Row(...)
您可以使用SizedBox黑白行
,在行之间尝试
SizedBox(height:20),
最终代码
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,children: <Widget>[
Row(
// first row with 3 column
mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: <Widget>[
Container(),Container(),],),SizedBox(height:20),Row(
// second row also with 3 column ans so on
mainAxisAlignment: MainAxisAlignment.spaceEvenly,//Row( third row also with 3 column ans so on
//Row( fourth row also with 3 column ans so on
// ....
],
,
您也可以使用Spacer(...。) 对我来说,填充还可以
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。