Flutter 中的 ListView 作为 TabBar

Question

我正在尝试创建一个水平 ListView 作为我的 TabBar 视图的一种“控制器”。\n我怎样才能做到这一点，当我单击其中一个 FlatButtons 时，它会更改选项卡。我可以根据按钮是否打开来更改按钮中的文本颜色吗？

\n\n

我的代码如下，我想要的是我添加为图像的内容

\n\n

代码：

\n\n

import \'package:Auszeit/services/auszeit_icons_icons.dart\';\nimport \'package:Auszeit/widgets/auszeitDrawer.dart\';\nimport \'package:Auszeit/widgets/order/itemCard.dart\';\nimport \'package:cloud_firestore/cloud_firestore.dart\';\nimport \'package:flutter/material.dart\';\n\nclass OrderPage extends StatefulWidget {\n  @override\n  _OrderPageState createState() => _OrderPageState();\n}\n\nclass _OrderPageState extends State<OrderPage>\n    with SingleTickerProviderStateMixin {\n  @override\n  Widget build(BuildContext context) {\n    TabController _tabController;\n    ScrollController _scrollController;\n\n    @override\n    void initState() {\n      _tabController = TabController(vsync: this, length: 4);\n      _scrollController = ScrollController();\n      super.initState();\n    }\n\n    return DefaultTabController(\n        length: 4,\n        child: Scaffold(\n          floatingActionButton: FloatingActionButton(\n            onPressed: () {},\n            elevation: 15,\n            child: Icon(\n              Icons.shopping_basket,\n              color: Colors.green[800],\n            ),\n            backgroundColor: Colors.white,\n          ),\n          appBar: AppBar(\n            elevation: 0,\n            backgroundColor: Colors.white,\n            leading: Builder(\n              builder: (context) {\n                return IconButton(\n                  icon: Icon(\n                    Icons.menu,\n                    color: Colors.grey,\n                  ),\n                  onPressed: () => AuszeitDrawer.of(context).open(),\n                );\n              },\n            ),\n            title: Text(\n              "Auszeit eSG",\n              style: TextStyle(\n                color: Colors.green[800],\n                fontWeight: FontWeight.bold,\n              ),\n            ),\n          ),\n          body: Padding(\n            padding: const EdgeInsets.fromLTRB(0, 16, 0, 16),\n            child: Column(\n              mainAxisAlignment: MainAxisAlignment.start,\n              crossAxisAlignment: CrossAxisAlignment.start,\n              children: <Widget>[\n                Padding(\n                  padding: const EdgeInsets.symmetric(horizontal: 20),\n                  child: Text(\n                    "Bestellen",\n                    style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),\n                  ),\n                ),\n                Container(\n                  height: 50,\n                  child: ListView(\n                    controller: _scrollController,\n                    shrinkWrap: false,\n                    scrollDirection: Axis.horizontal,\n                    children: <Widget>[\n                      FlatButton(\n                        onPressed: () => _tabController.animateTo(1),\n                        child: Text(\n                          "BR\xc3\x96TCHEN",\n                          style: TextStyle(\n                              fontFamily: "Open Sans",\n                              color: Colors.green[800],\n                              fontWeight: FontWeight.bold,\n                              fontSize: 20),\n                        ),\n                      ),\n                      FlatButton(\n                        onPressed: () => _tabController.animateTo(2),\n                        child: Text(\n                          "KALTGETR\xc3\x84NKE",\n                          style: TextStyle(\n                              fontFamily: "Open Sans",\n                              color: Colors.grey,\n                              fontWeight: FontWeight.bold,\n                              fontSize: 20),\n                        ),\n                      ),\n                      FlatButton(\n                        onPressed: () => _tabController.animateTo(3),\n                        child: Text(\n                          "HEI\xc3\x9fGETR\xc3\x84NKE",\n                          style: TextStyle(\n                              fontFamily: "Open Sans",\n                              color: Colors.grey,\n                              fontWeight: FontWeight.bold,\n                              fontSize: 20),\n                        ),\n                      ),\n                      FlatButton(\n                        onPressed: () {},\n                        child: Text(\n                          "MILCHPRODUKTE",\n                          style: TextStyle(\n                              fontFamily: "Open Sans",\n                              color: Colors.grey,\n                              fontWeight: FontWeight.bold,\n                              fontSize: 20),\n                        ),\n                      )\n                    ],\n                  ),\n                ),\n                Expanded(\n                  child: Padding(\n                    padding: const EdgeInsets.fromLTRB(20, 20, 20, 30),\n                    child: TabBarView(controller: _tabController, children: [\n                      CategoryTab(catId: "1"),\n                      CategoryTab(catId: "2"),\n                      CategoryTab(catId: "3"),\n                      CategoryTab(catId: "4"),\n                    ]),\n                  ),\n                ),\n              ],\n            ),\n          ),\n        ));\n  }\n}\n\nclass CategoryTab extends StatelessWidget {\n  final String catId;\n\n  const CategoryTab({Key key, @required this.catId}) : super(key: key);\n\n  @override\n  Widget build(BuildContext context) {\n    return StreamBuilder(\n        stream: Firestore.instance\n            .collection(\'items\')\n            .where(\'catid\', isEqualTo: catId)\n            .snapshots(),\n        builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {\n          if (snapshot.hasData) {\n            return GridView.builder(\n              gridDelegate:\n                  SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),\n              shrinkWrap: true,\n              itemCount: snapshot.data.documents.length,\n              itemBuilder: (BuildContext context, int index) {\n                return ItemCard(\n                  cost: snapshot.data.documents[index]["cost"] == null\n                      ? 1\n                      : snapshot.data.documents[index]["cost"],\n                  name: snapshot.data.documents[index]["name"],\n                  desc: snapshot.data.documents[index]["desc"] == null\n                      ? "Keine Beschreibung vorhanden"\n                      : snapshot.data.documents[index]["desc"],\n                  imageUrl: snapshot.data.documents[index]["image_path"],\n                );\n              },\n            );\n          } else {\n            return Container(\n                height: 50, width: 50, child: CircularProgressIndicator());\n          }\n        });\n  }\n}\n

\n\n

应用程序：\n

\n

Answer 1

检查一下，它工作得很好：检查下面的代码：

import 'package:flutter/material.dart';

class MyTabBar extends StatefulWidget {
  @override
  _MyTabBarState createState() => _MyTabBarState();
}

class _MyTabBarState extends State<MyTabBar>
    with SingleTickerProviderStateMixin {
  // define your tab controller here
  TabController _tabController;

  @override
  void initState() {
    // initialise your tab controller here
    _tabController = TabController(length: 4, vsync: this);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: Icon(
          Icons.menu,
          color: Colors.black,
        ),
        backgroundColor: Colors.transparent,
        elevation: 0,
        title: Text(
          'Aszeit eSG',
          style: TextStyle(color: Colors.black),
        ),
      ),
      body: Column(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 5),
            child: TabBar(
              controller: _tabController,
              labelColor: Colors.green,
              isScrollable: true,
              indicatorColor: Colors.transparent,
              unselectedLabelColor: Colors.grey,
              unselectedLabelStyle: TextStyle(
                fontSize: 16,
                color: Colors.grey,
                fontWeight: FontWeight.w700,
              ),
              labelStyle: TextStyle(
                fontSize: 16,
                fontWeight: FontWeight.w700,
              ),
              tabs: <Widget>[
                Text('BROTCHEN'),
                Text('KALTEGETRANKE'),
                Text('HEIBGETRANKE'),
                Text('MILCHPPODUKE'),
              ],
            ),
          ),
          Expanded(
            child: TabBarView(
              controller: _tabController,
              children: <Widget>[
                Center(
                  child: Text(
                    'BROTCHEN',
                    style: TextStyle(fontSize: 30, fontWeight: FontWeight.w600),
                  ),
                ),
                Center(
                  child: Text(
                    'KALTEGETRANKE',
                    style: TextStyle(fontSize: 30, fontWeight: FontWeight.w600),
                  ),
                ),
                Center(
                  child: Text(
                    'HEIBGETRANKE',
                    style: TextStyle(fontSize: 30, fontWeight: FontWeight.w600),
                  ),
                ),
                Center(
                  child: Text(
                    'MILCHPPODUKE',
                    style: TextStyle(fontSize: 30, fontWeight: FontWeight.w600),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

输出：