dart - 具有水平列表和网格的 Flutter 可滚动主体作为子项

Question

我很难理解如何最好地为身体创建一个可滚动的容器，该容器包含在默认情况下也是可滚动的子元素中。

在这种情况下，网格不应该滚动，但应该滚动的是整个页面，这样您就可以看到网格内的更多元素。所以基本上整个内容应该随着 ListView 的添加水平移动而垂直移动（但这已经很好了）

我让它工作了，但它使用了一堆“银”小部件，我希望有一个更好的解决方案可以在不使用所有这些额外小部件的情况下工作。

谢谢

到目前为止，这是我的代码：

class GenresAndMoodsPage extends AbstractPage {
  @override
  String getTitle() => 'Genres & Moods';

  @override
  int getPageBottomBarIndex() => BottomBarItems.Browse.index;

  static const kListHeight = 150.0;

  Widget _buildHorizontalList() => SizedBox(
        height: kListHeight,
        child: ListView.builder(
          scrollDirection: Axis.horizontal,
          itemCount: 20,
          itemBuilder: (_, index) =>
              CTile(heading: 'Hip Hop', subheading: '623 Beats'),
        ),
      );

  Widget _buildGrid() => GridView.count(
        crossAxisCount: 2,
        crossAxisSpacing: LayoutSpacing.sm,
        mainAxisSpacing: LayoutSpacing.sm,
        children: List.generate(10, (index) {
          return CTile(
            padding: false,
            heading: 'Kevin Gates Type Beat',
            subheading: '623 FOLLOWERS',
            width: double.infinity,
          );
        }),
      );

  @override
  Widget buildBody(_) {
    return ListView(children: [
      CSectionHeading('Popular Genres & Moods'),
      _buildHorizontalList(),
      CSectionHeading('All Genres & Moods'),
      _buildGrid(),
    ]);
  }
}

结果应该是这样的

标签： dartflutter

Answer 1

创建具有水平滚动方向的列表并将其称为垂直滚动方向的子项。

body: new ListView.builder(itemBuilder: (context, index){
            return new HorizList();
          })

class HorizList extends StatelessWidget{
 @override
 Widget build(BuildContext context) {
 return new Container(
  height: 100.0,

  child: new ListView.builder(itemBuilder: (context, index){
    return new Card(child: new Container(width: 80.0,
    child: new Text('Hello'),alignment: Alignment.center,));
  }, scrollDirection: Axis.horizontal,),
);
}
}