Question

我正在尝试建立一种时间表，其中每个单元格可能具有不同的持续时间（高度）。为了实现这一点，有4列/ listview /无论什么都应该一起滚动，并且每个列（理想情况下）都应该有一个ListView.builder。

我尝试了所有可以在互联网上找到的内容，但没有成功。我仍然是Dart的初学者，但是我尝试了ListView，Column，ListView.builder，Table的每种组合。。。我能找到并想到。

这是我目前有效的方法，但是拒绝允许我使用ListView.builder 如果我将容器替换为ListView.builder，则不会显示任何内容

这里是我当前拥有的gif的链接，减去ListView.builder部分：Desired outcome

    return ListView(
      padding: EdgeInsets.all(5.0),
      children: <Widget>[
        Card(
          child: Container(
            alignment: Alignment(0, 0),
            height: header_height,
            child: Text(
              "Header spanning all 4 columns",
            ),
          ),
        ),
        Table(
          children: <TableRow>[
            TableRow(
              children: <Widget>[
                Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    Container(
                      height: 50,
                      child: Text(
                        "Item 1",
                      ),
                    ),
                  ],
                ),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    Container(
                      height: 100,
                      child: Text(
                        "Item 2",
                      ),
                    ),
                  ],
                ),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    Container(
                      height: 400,
                      child: Text(
                        "Item 3",
                      ),
                    ),
                  ],
                ),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    Container(
                      height: 50,
                      child: Text(
                        "Item 4",
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ],
        ),
        Card(
          child: Container(
            alignment: Alignment(0, 0),
            height: header_height,
            child: Text(
              "Header spanning all 4 columns",
            ),
          ),
        ),
        Table(
          children: <TableRow>[
            TableRow(
              children: <Widget>[
                Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    Container(
                      height: 200,
                      child: Text(
                        "Item 1",
                      ),
                    ),
                  ],
                ),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    Container(
                      height: 50,
                      child: Text(
                        "Item 2",
                      ),
                    ),
                  ],
                ),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    Container(
                      height: 50,
                      child: Text(
                        "Item 3",
                      ),
                    ),
                  ],
                ),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    Container(
                      height: 50,
                      child: Text(
                        "Item 4",
                      ),
                    ),
                  ],
                ),              ],
            ),
          ],
        ),
      ],
    );

Answer 1

您可以尝试扩展小部件，文档为here

例如

Expanded(child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    Container(
                      height: 50,
                      child: Text(
                        "Item 2",
                      ),
                    ),
                  ],
                ),)

Answer 2

如果我说对了，那么此代码将为您工作。

ScrollConfiguration(
      behavior: MyBehaviour(),
      child: ListView.builder(
        shrinkWrap: true,
        //Change it the count you want
        itemCount: Random().nextInt(10),
        itemBuilder: (context, index) {
          return Column(
            children: <Widget>[
              Card(
                child: Container(
                  alignment: Alignment(0, 0),
                  height: 36,
                  child: Text(
                    "Header spanning all 4 columns",
                  ),
                ),
              ),
              ListView.builder(
                  //change this too
                  shrinkWrap: true,
                  physics: ClampingScrollPhysics(),
                  itemCount: Random().nextInt(9),
                  itemBuilder: (context, index) {
                    return Table(
                      children: <TableRow>[
                        TableRow(
                          children: <Widget>[
                            Column(
                              crossAxisAlignment:
                                  CrossAxisAlignment.stretch,
                              children: <Widget>[
                                Container(
                                  height: 50,
                                  child: Text(
                                    "Item 1",
                                  ),
                                ),
                              ],
                            ),
                            Column(
                              crossAxisAlignment:
                                  CrossAxisAlignment.stretch,
                              children: <Widget>[
                                Container(
                                  height: 100,
                                  child: Text(
                                    "Item 2",
                                  ),
                                ),
                              ],
                            ),
                            Column(
                              crossAxisAlignment:
                                  CrossAxisAlignment.stretch,
                              children: <Widget>[
                                Container(
                                  height: 400,
                                  child: Text(
                                    "Item 3",
                                  ),
                                ),
                              ],
                            ),
                            Column(
                              crossAxisAlignment:
                                  CrossAxisAlignment.stretch,
                              children: <Widget>[
                                Container(
                                  height: 50,
                                  child: Text(
                                    "Item 4",
                                  ),
                                ),
                              ],
                            ),
                          ],
                        ),
                      ],
                    );
                  })
            ],
          );
        },
      ),
    )

这里有MyBehaviour类

class MyBehaviour extends ScrollBehavior {
 @override
 Widget buildViewportChrome(BuildContext context, Widget child,
  AxisDirection axisDirection) {
  return child;
 } 
}

Answer 3

（请原谅任何语法错误，我删除了将其缩减为仅必要代码的内容）。

我最终弄清楚了我可以做到这一点：

List<Widget> column_1 = [];
    var my_index;
    for (my_index = 0; my_index < my_list.length; my_index++) {
      //we need to do this otherwise it seems to -simultaneously- increment itself and be stuck at whatever.length...
      var tmp_index = my_index;
      column_1 .add(
        Card(
          child: Text("Item ${tmp_index}"),
        ),
      );
    }

然后使用它来实现所生成的小部件列表：

    return ListView(
      padding: EdgeInsets.all(5.0),
      children: <Widget>[
        Card(
          child: Container(
            height: header_height,
            child: Text(
              "Header 1",
            ),
          ),
        ),
        Table(
          children: <TableRow>[
            TableRow(
              children: <Widget>[
                Container(
                  height: 1000,
                  width: 50,
                  child: Column(
                      children: <Widget>[
                        Expanded(
                          child: Column(children: column_1 ),
                        ),
                      ]),
                ),
                Container(
                  height: 1000,
                  width: 50,
                  child: Column(
                      children: <Widget>[
                        Expanded(
                          child: Column(children: column_2 ),
                        ),
                      ]),
                ),
                Container(
                  height: 1000,
                  width: 50,
                  child: Column(
                      children: <Widget>[
                        Expanded(
                          child: Column(children: column_3 ),
                        ),
                      ]),
                ),
                Container(
                  height: 1000,
                  width: 50,
                  child: Column(
                      children: <Widget>[
                        Expanded(
                          child: Column(children: column_4 ),
                        ),
                      ]),
                ),
              ],
            ),
          ],
        ),
      ],
    );

这还有一个额外的好处，就是能够在其下放置更多全角标题卡和表格，并且整个内容可以滚动并像一张大桌子一样工作。

如何在一行中具有ListView.builder的多列（4）列（或类似列）中全部一起滚动

3 个答案: