如何在 Flutter 中实现带有水平滚动标题的垂直滚动列表

Question

提前致谢，

项目（使用 Flutter）我正在研究如何在各个服务下显示类别列表。

其中类别必须显示在垂直滚动列表中，服务必须显示在水平滚动列表中。

列表（类别和服务）都应该相互滚动。

这有点像带有单个垂直滚动列表的多个选项卡。在实现这一点时遇到了麻烦。请分享克服这个问题的想法。

Answer 1

我认为您正在寻找的是NestedScrollView。它适用于 TabBarViews。

你的代码应该是这样的：

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  var _tabController;

  @override
  void initState() {
    super.initState();

    _tabController = TabController(length: 8, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    var tabBar = TabBar(
      controller: _tabController,
      //This property will allow your tabs to be horizontally scrollable
      isScrollable: true,
      indicatorColor: Colors.black,
      labelColor: Colors.black,
      tabs: [
        //Tab 1
        //Tab 2
        //Tab 3
        //etc
      ],
    );

    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (context, isScrolled) => [
          SliverAppBar(
            expandedHeight: 300,
            pinned: true,
            flexibleSpace: FlexibleSpaceBar(
              title: Text('Title'),
              //Without this padding the title appears behind the tabs.
              //This is the whole reason why the tabBar is in a local variable, to
              //be able to use its height here.
              titlePadding: EdgeInsetsDirectional.only(
                  start: 72, bottom: tabBar.preferredSize.height + 16),
              background: //Your image
            ),
            // I did this this way to have a white bottom bar like in your photo,
            // however, you could just pass the tabBar. The background image would
            //be behind it.
            bottom: PreferredSize(
              child: Container(
                //This will keep your tabs centered if you have not enough to fill
                //the display's width 
                alignment: Alignment.center,
                width: double.infinity,
                color: Colors.white,
                child: tabBar,
              ),
              preferredSize: Size(double.infinity, tabBar.preferredSize.height),
            ),
          ),
        ],
        body: TabBarView(
          controller: _tabController,
          children: <Widget>[
            //Child 1
            //Child 2
            //Child 3
            //etc
          ],
        ),
      ),
    );
  }
}

这将是最终结果：

我希望这就是你要找的东西：D