flutter - 如何在颤动中创建带有下一个和上一个按钮的可滚动选项卡

Question

我正在尝试使用下一个和上一个按钮创建一个可滚动的选项卡列表，以便当我单击这些按钮时，我应该看到下一个不在视图中的隐藏选项卡。反之亦然。

注意按钮。

到目前为止我有这个，但我无法捕捉视图中的标签并采取相应的行动，有人可以帮忙。

class NewEntryPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => NewEntryPageState();
}

class NewEntryPageState extends State<NewEntryPage>
    with SingleTickerProviderStateMixin {
  final List<Tab> myTabs = <Tab>[
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
    Tab(text: 'bro'),
  ];

  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(vsync: this, length: myTabs.length);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    return Column(
      children: <Widget>[
        Container(
          margin: EdgeInsets.symmetric(vertical: 20.0),
          padding: const EdgeInsets.all(10.0),
          color: Colors.white,
          child: Column(
            children: <Widget>[
              Container(
                child: Row(
                  children: [
                    IconButton(
                      icon: Icon(Icons.arrow_back_ios),
                      onPressed: () {
                        if (_tabController.index > 0) {
                          _tabController.animateTo(_tabController.index - 1);
                        } else {
                          Scaffold.of(context).showSnackBar(SnackBar(
                            content: Text("Can't go back"),
                          ));
                        }
                      },
                    ),
                    Expanded(
                      child: TabBar(
                        isScrollable: true,
                        controller: _tabController,
                        labelStyle: TextStyle(color: Colors.black),
                        unselectedLabelColor: Colors.black,
                        labelColor: Colors.blue,
                        tabs: List.generate(
                          20,
                          (index) {
                            return Tab(
                              text: "Tab $index",
                            );
                          },
                        ),
                      ),
                    ),
                    IconButton(
                      icon: Icon(Icons.arrow_forward_ios),
                      onPressed: () {
                        if (_tabController.index + 1 < 20) {
                          _tabController.animateTo(_tabController.index + 1);
                        } else {
                          Scaffold.of(context).showSnackBar(SnackBar(
                            content: Text("Can't move forward"),
                          ));
                        }
                      },
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }
}

这就是这段代码的作用

标签： flutterdartflutter-layout