带有水平列表和子网格的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(),
    ]);
  }
}

结果应该是这样的

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,),
);
}
}