所以我想在我的应用程序中显示Pinterest样式板,但没有StaggeredGridList
,而是通过正常的容器和行/列部件。
这里是一个图像:
所以一开始,我试着用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
)
),
),
],
),
),
],
),
),
],
),
),
)
],
)
非常感谢!!**
1条答案
按热度按时间ttp71kqs1#
您可以使用类似flutter_staggered_grid_view包的东西来实现相同的结果。
你的代码基本上应该看起来像这样: