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

Answer 2

因为我们也想滚动Popular Genres & Moods部分，所以我们不应该使用nestedScroll。在上面的示例中，GridView嵌套在`ListView中。因此，当我们滚动时，只有GridView会滚动。

我使用仅一个 ListView来实现类似的屏幕。

孩子数=（AllGenresAndMoodsCount / 2）+ 1
- 除以2，因为我们每行有2个元素
- 为第一个元素（即水平滚动视图）+1。

请参考代码：

import 'package:flutter/material.dart';

void main() {
  runApp(new Home());
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var image = new Image.network("http://www.gstatic.com/webp/gallery/1.jpg");
    var container = new Container(
      child: image,
      padding: EdgeInsets.only(left: 5.0, right: 5.0, top: 5.0, bottom: 5.0),
      width: 200.0,
      height: 200.0,
    );

    return MaterialApp(
      title: "Scroller",
      home: Scaffold(
        body: Center(
            child: new ListView.builder(
          itemBuilder: (context, index) {
            if (index == 0) { //first row is horizontal scroll
              var singleChildScrollView = SingleChildScrollView(
                  child: Row(
                    children: <Widget>[
                      container,
                      container,
                      container,
                    ],
                  ),
                  scrollDirection: Axis.horizontal);
              return singleChildScrollView;
            } else {
              return new Row(
                children: <Widget>[container, container],
              );
            }
          },
          itemCount: 10, // 9 rows of AllGenresAndMoods + 1 row of PopularGenresAndMoods
        )),
      ),
    );
  }
}

带有水平列表和子网格的Flutter可滚动主体

2 个答案: