我们可以用抽屉按钮控制颤动标签的位置吗

Question

我想创建一个用户界面，人们可以通过单击它们或按下抽屉上的按钮来切换选项卡。有点像 2 个控件来做一件事。

这是可能的还是我问错了问题？

Answer 1

这不是一个非常错误的问题。对的，这是可能的。您可以为两个控件定义相同的方法。

编辑

这是一个完整的代码示例：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final appTitle = 'Drawer Demo';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  MyHomePage({Key key, this.title}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

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

  final List<Tab> myTabs = <Tab>[
    new Tab(text: 'LEFT'),
    new Tab(text: 'RIGHT'),
  ];

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

    _tabController = new TabController(vsync: this, length: myTabs.length);
  }

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

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          bottom: TabBar(
            onTap: (index) {
              print("index");
              print(index);
            },
            controller: _tabController,
            tabs: myTabs,
          ),
          title: Text('Tabs Demo'),
        ),
        body: TabBarView(
          controller: _tabController,
          children: myTabs.map((Tab tab) {
            return Center(child: Text(tab.text));
          }).toList(),
        ),
        drawer: Drawer(
          // Add a ListView to the drawer. This ensures the user can scroll
          // through the options in the drawer if there isn't enough vertical
          // space to fit everything.
          child: ListView(
            // Important: Remove any padding from the ListView.
            padding: EdgeInsets.zero,
            children: <Widget>[
              DrawerHeader(
                child: Text('Drawer Header'),
                decoration: BoxDecoration(
                  color: Colors.blue,
                ),
              ),
              ListTile(
                title: Text('LEFT'),
                onTap: () {
                  // Update the state of the app
                  // ...
                  // Then close the drawer
                  setState(() {
                    _tabController.index = 0;
                  });
                  Navigator.pop(context);
                },
              ),
              ListTile(
                title: Text('RIGHT'),
                onTap: () {
                  // Update the state of the app
                  // ...
                  // Then close the drawer
                  setState(() {
                    _tabController.index = 1;
                  });
                  Navigator.pop(context);
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}