使用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 (将#修改为@）