如何在Flutter中實現水平可滾動header的垂直滾動列表

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