如何解决使用Flutter的Pintrest风格板
因此,我想在应用中显示Pinterest样式的面板,但不显示StaggeredGridList
,而是通过常规的Container和Row / Column小部件显示
这是一张图片:
因此,起初,我尝试使用Expanded
来制作具有更高高度的容器,占用高度,而另一个占用宽度,但是当您希望图片彼此靠下时,这种方法不起作用。因此,请在下面将您的代码发布为答案。
我的代码:
Column(
children: [
Padding(
padding: const EdgeInsets.only(left: 20,right: 20,top: 15,bottom: 12),// parent container housing all other widgets
child: Container(
height: 220,child: Column(
children: [
// both the pics and colours
Expanded(
child: Row( // row
children: [
// vertical pic
Container( // first child
width: 180,// give it a width,it takes up the height of parent since it is wrapped with an expanded widget
decoration: BoxDecoration(
color: Colors.blue,borderRadius: BorderRadius.circular(
15.0,),image: DecorationImage(
image: NetworkImage(storiesList[0]),fit: BoxFit.fill
)
),// spacing between vertical pic and horizontal pic
SizedBox( // second child
width: 12,// banner pic and colours
Expanded( // thrid child [consists a column with children ]
child: Column(
children: [
// banner pic
Container(
height: 165,// give it a height,it takes up the width of parent since it is wrapped with an expanded widget
decoration: BoxDecoration(
color: Colors.blue,borderRadius: BorderRadius.circular(
15.0,image: DecorationImage(
image: NetworkImage(storiesList[1]),fit: BoxFit.fitWidth
)
),],)
],)
非常感谢!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。