如何解决“难以滚动包含多个水平列表视图的垂直列表视图”？

Question

我有一个垂直列表视图，其中显示了类别列表。 在每个类别的内部，我添加了一个水平列表视图，以显示属于该类别的图像。

当我尝试滚动垂直列表视图时，由于手势是由其内部水平列表视图捕获的，因此很难滚动。

我试图在内部列表视图中添加不同的“物理”选项，但它们似乎都不起作用。

这是此屏幕的代码：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:colorbook/network/network_manager.dart';
import 'package:colorbook/models/category.dart';
import 'package:colorbook/utilities/constants.dart';
import 'package:colorbook/widgets/home_banner.dart';
import 'package:colorbook/models/category_image.dart';

class TabBarController extends StatefulWidget {
  @override
  _TabBarControllerState createState() => _TabBarControllerState();
}

class _TabBarControllerState extends State<TabBarController> {
  int _selectedIndex;
  List<Category> categoryList;
  Map<String, List<CategoryImage>> imagesMap =
      Map<String, List<CategoryImage>>();

  var networkManager = NetworkManager();

  bool isSelected(int index) => _selectedIndex == index;
  Color colorForTabIndex(int index) =>
      isSelected(index) ? kTabActiveColor : kTabInactiveColor;

  List<Widget> getCategoryWidgets() {
    if (categoryList != null) {
      return categoryList
          .map((category) => Container(
                width: double.infinity,
                margin: EdgeInsets.symmetric(vertical: 8, horizontal: 16),
                child: ListView(
                  shrinkWrap: true,
                  children: <Widget>[
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        Text(
                          category.name,
                          style: kCategoryTitleStyle,
                          textAlign: TextAlign.left,
                        ),
                        Text(
                          'show more',
                          style: kCategoryMoreStyle,
                        ),
                      ],
                    ),
                    Container(
                      height: 150,
                      child: ListView(
                        scrollDirection: Axis.horizontal,
                        children: getImagesWidget(category),
                      ),
                    ),
                  ],
                ),
              ))
          .toList();
    }
    return [];
  }

  List<Widget> getImagesWidget(Category category) {
    var images = imagesMap[category.categoryId];
    if (images == null) {
      return [];
    }

    return images
        .map((image) => Container(
              width: 150,
              child: Card(
                margin: EdgeInsets.symmetric(horizontal: 4, vertical: 8),
                child: Image.network(image.thumbUrl()),
              ),
            ))
        .toList();
  }

  void getCategories() async {
    var result = await networkManager.getCategories();

    setState(() {
      categoryList = result.data;
      categoryList.forEach((category) {
        getImages(category: category);
      });
    });
  }

  void getImages({Category category}) async {
    var result =
        await networkManager.getImages(categoryId: category.categoryId);

    setState(() {
      imagesMap[category.categoryId] = result.data;
    });
  }

  List<Widget> homeItems() {
    List<Widget> homeItems = [HomeBanner()];
    homeItems.addAll(getCategoryWidgets());
    return homeItems;
  }

  @override
  Widget build(BuildContext context) {
    getCategories();

    return CupertinoTabScaffold(
      tabBar: CupertinoTabBar(
        backgroundColor: kTabBackgroundColor,
        items: getTabItems(),
        onTap: (index) {
          setState(() {
            _selectedIndex = index;
          });
        },
      ),
      tabBuilder: (BuildContext context, int index) {
        switch (index) {
          case 0:
            return CupertinoPageScaffold(
              navigationBar: CupertinoNavigationBar(
                middle: Text("Home"),
              ),
              child: SafeArea(
                child: ListView(
                  shrinkWrap: true,
                  children: homeItems(),
                ),
              ),
            );
            break;
          case 1:
            return Center(child: Text('tabView2'));
            break;
          case 2:
            return Center(child: Text('tabView33'));
            break;
          case 3:
            return Text('tabView4');
            break;
          default:
            return Container();
        }
      },
    );
  }

  List<BottomNavigationBarItem> getTabItems() {
    return [
      BottomNavigationBarItem(
        icon: Icon(Icons.home),
        title: Text(
          'Homepage',
          style: TextStyle(
            color: colorForTabIndex(0),
          ),
        ),
        backgroundColor: kTabInactiveColor,
        activeIcon: Icon(
          Icons.home,
          color: kTabActiveColor,
        ),
      ),
      BottomNavigationBarItem(
          icon: Icon(Icons.category),
          title: Text(
            'Categories',
            style: TextStyle(
              color: colorForTabIndex(1),
            ),
          ),
          backgroundColor: kTabInactiveColor,
          activeIcon: Icon(
            Icons.category,
            color: kTabActiveColor,
          )),
      BottomNavigationBarItem(
          icon: Icon(
            FontAwesomeIcons.user,
          ),
          title: Text(
            'Profile',
            style: TextStyle(
              color: colorForTabIndex(2),
            ),
          ),
          backgroundColor: kTabInactiveColor,
          activeIcon: Icon(
            FontAwesomeIcons.user,
            color: kTabActiveColor,
          )),
    ];
  }
}

我希望垂直列表视图可以平滑滚动，有关如何解决此问题的任何建议？谢谢〜