Flutter：响应式 Web - 列中的多个列表视图

Question

我正在开发一个 flutter web 应用程序，需要在一个列中放置多个列表视图。 我正在尝试使用响应式框架。但它似乎不适用于我的项目。我尝试了包裹小部件。我也不工作。

我想做的是根据屏幕尺寸在列表视图中移动。

   Just one Column                   two Columns for wider screen

     |  1  |                         |  1  | |  5  |
     |  2  |                         |  2  | |  6  | 
     |  3  |             =>          |  3  |
     |  4  |                         |  4  |
     |  5  |
     |  6  |

This order of the list views should be exactly what I illustrated above.
Below is not what I need.

    |  1  | |  2  |
    |  3  | |  4  |
    |  5  | |  6  |
    |  7  |

有什么建议吗？？

Answer 1

尝试 GridView。根据您对容器尺寸的要求，有很多内容。但是 GridView.builder 带有 SliverGridDelegateWithMaxCrossAxisExtent （还有其他变体）。

在您的情况下，您需要将轴方向更改为水平方向。

Answer 2

我使用responsive_framework包实现了这一点 响应式框架

示例：

...
      body: Center(
      child: Form(
        key: _formKey,
        child: ResponsiveBreakpoints.of(context).smallerThan(DESKTOP)
            ?

            //Mobile or Tablet UI
            //Return 1 Column with all fields
            ResponsiveRowColumn(
                layout: ResponsiveRowColumnType.COLUMN,
                children: [
                  //1st column
                  ResponsiveRowColumnItem(
                      rowFlex: 1,
                      child: ListView(
                        children: [
                          //field 1
                          TextFormField(),
                          //field 2
                          TextFormField(),
                          //field 3
                          TextFormField(),
                          //field 4
                          TextFormField(),
                          //field 5
                          TextFormField(),
                          //field 6
                          TextFormField(),
                          //field 7
                          TextFormField(),
                        ],
                      )),
                ],
              )
            :

            //Is desktop. Arrange in 2 Columns
            ResponsiveRowColumn(
                layout: ResponsiveRowColumnType.ROW,
                children: [
                  //1st column
                  ResponsiveRowColumnItem(
                      rowFlex: 1,
                      child: ListView(
                        children: [
                          //field 1
                          TextFormField(),
                          //field 2
                          TextFormField(),
                          //field 3
                          TextFormField(),
                          //field 4
                          TextFormField(),
                        ],
                      )),
                  //2nd column
                  ResponsiveRowColumnItem(
                      rowFlex: 1,
                      child: ListView(
                        children: [
                          //field 5
                          TextFormField(),
                          //field 6
                          TextFormField(),
                          //field 7
                          TextFormField(),
                        ],
                      )),
                ],
              ),
      ),
    ),
...