Question

以下是我的代码，我尝试从底部导航栏按钮导航到下一个选项卡。参见模拟以获得理解。

代码：

class TabbedAppBarSample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: choices.length,
        child: Scaffold(
          floatingActionButtonLocation:
              FloatingActionButtonLocation.centerDocked,
          bottomNavigationBar: BottomAppBar(
            notchMargin: 20,
            child: new Row(
              // mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                Text(
                  'Next >',
                  style: TextStyle(fontSize: 20, color: Colors.red),
                )
              ],
            ),
          ),
          backgroundColor: Colors.white,
          appBar: AppBar(
            backgroundColor: Colors.white, // status bar color
            brightness: Brightness.light,
            title: TimerPage(),
            bottom: TabBar(
              // isScrollable: true,
              indicatorColor: Colors.red,
              unselectedLabelColor: Colors.grey,
              labelColor: Colors.red,
              tabs: choices.map((Choice choice) {
                return Tab(
                  text: choice.title,
                );
              }).toList(),
            ),
          ),
          body: TabBarView(
            children: choices.map((Choice choice) {
              return Padding(
                padding: const EdgeInsets.all(6.0),
                child: ChoiceCard(choice: choice),
              );
            }).toList(),
          ),
        ),
      ),
    );
  }
}

模拟：

此外，Idea可以通过滑动或单击“下一步”按钮进行导航。

Answer 1

使用TabController和animateTo
您可以在

下看到完整的代码

代码段

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

  void _toggleTab() {
    _tabIndex = _tabController.index + 1;
    _tabController.animateTo(_tabIndex);
  }

  ...
bottomNavigationBar: BottomAppBar(
        notchMargin: 20,
        child: new Row(
          // mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            InkWell(
              onTap: () {
                _toggleTab();
              },

工作演示

完整代码

    import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appTitle = 'Tabs Demo';
    return MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

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

  @override
  State<StatefulWidget> createState() {
    return _MyHomePageState();
  }
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  int _tabIndex = 0;

  TabController _tabController;

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

  void _toggleTab() {
    _tabIndex = _tabController.index + 1;
    _tabController.animateTo(_tabIndex);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
        notchMargin: 20,
        child: new Row(
          // mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            InkWell(
              onTap: () {
                _toggleTab();
              },
              child: Text(
                'Next >',
                style: TextStyle(fontSize: 20, color: Colors.red),
              ),
            )
          ],
        ),
      ),
      appBar: AppBar(
        title: Text(widget.title),
        bottom: TabBar(
          controller: _tabController,
          tabs: [
            Tab(text: 'Tab 1'),
            Tab(text: 'Tab 2'),
            Tab(text: 'Tab 3'),
          ],
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: [
          Card(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                ListTile(
                  leading: Icon(Icons.album),
                  title: Text('Hello 1'),
                  subtitle: Text('Click on Next Button to go to Tab 2.'),
                ),
              ],
            ),
          ),
          Card(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                ListTile(
                  leading: Icon(Icons.album),
                  title: Text('Hello 2'),
                  subtitle: Text('Click on Next Button to go to Tab 3'),
                ),
              ],
            ),
          ),
          Card(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                ListTile(
                  leading: Icon(Icons.album),
                  title: Text('Hello 3'),
                  subtitle: Text('The End'),
                ),
              ],
            ),
          ),
        ],
      ),
    ));
  }
}

Answer 2

滑动行为应该已经存在，但是如果要使文本像按钮一样可单击，则应查看How can I implement OnPressed callback for Text widget, Flutter上的一些示例。（在示例中，我将使用array([[[ 0. , nan, nan, nan, nan], [ nan, 0. , nan, nan, -1.07346633], [ nan, nan, 0. , nan, nan], [ nan, nan, nan, 0. , nan], [ nan, 1.07346633, nan, nan, 0. ]], [[ 0. , nan, nan, nan, nan], [ nan, 0. , nan, nan, nan], [ nan, nan, 0. , -1.44470265, nan], [ nan, nan, 1.44470265, 0. , nan], [ nan, nan, nan, nan, 0. ]], [[ 0. , nan, 1.80965682, nan, nan], [ nan, 0. , nan, nan, nan], [-1.80965682, nan, 0. , nan, nan], [ nan, nan, nan, 0. , nan], [ nan, nan, nan, nan, 0. ]]]) shift(stats1_arr,(1,0,0), cval=np.nan) array([[[ nan, nan, nan, nan, nan], [ nan, nan, nan, nan, nan], [ nan, nan, nan, nan, nan], [ nan, nan, nan, nan, nan], [ nan, nan, nan, nan, nan]], [[ nan, nan, nan, nan, nan], [ nan, nan, nan, nan, nan], [ nan, nan, nan, nan, nan], [ nan, nan, nan, nan, nan], [ nan, nan, nan, nan, nan]], [[ nan, nan, nan, nan, nan], [ nan, nan, nan, nan, nan], [ nan, nan, nan, nan, nan], [ nan, nan, nan, nan, nan], [ nan, nan, nan, nan, nan]]])）

第二，我建议使用scipy.ndimage.interpolation.shift进行此操作。现在，如果您想使用“下一步”按钮，则必须实现自己的FlatButton。在按钮的StatefulWidget中，您可以使用TabController来实现“下一个”行为。简化的有状态示例：

onPressed

现在，如果您想将其保留为TabController.animateTo()。您需要将class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin { TabController myTabController; @override void initState() { super.initState(); myTabController = new TabController( vsync: this, length: //your_choices, ); } @override Widget build(BuildContext context) { return Scaffold( bottomNavigationBar: BottomAppBar( child: new Row( mainAxisAlignment: MainAxisAlignment.end, children: <Widget>[ FlatButton( onPressed: () { myTabController.animateTo(myTabController.index + 1); }, child: new Text('Next >'), ), ], ), ), appBar: AppBar( title: Text(widget.title), bottom: TabBar( controller: myTabController, tabs: //your_choices, ), ), body: TabBarView( controller: myTabController, children: //your_choices, ), ); } }包装在StatelessWidget内才能访问Scaffold，以执行与上述相同的操作。这是您的Builder的简化示例片段：

DefaultTabController

根据需要进行修改。

如何从名为Next的bottomNavigationBar按钮滑动到下一个选项卡？

2 个答案: