Question

我在flutter中使用了选项卡控制器，但是如何单击按钮才能导航到某个选项卡屏幕。我将选项卡控制器放在主屏幕中，然后放在3个不同的屏幕中。下面是我的示例代码。

主屏幕（带有标签控制器）

class HomePage extends StatefulWidget {

@override
_HomePageState createState() => new _HomePageState();
}

class _HomePageState extends State<HomePage>
with SingleTickerProviderStateMixin {

int _currentIndex = 0;
TabController _tabController;
final List<Widget> _children = [
firstscreen.FirstScreen(),
secondscreen.SecondScreen(),
thirdscreen.ThirdScreen()
];

List<Widget> _tabs = <Widget>[
Tab(icon: Icon(Icons.home), text: 'Home'),
Tab(icon: Icon(Icons.history), text: 'History'),
Tab(icon: Icon(Icons.account_circle), text: 'Profile'),
];

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

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

@override
Widget build(BuildContext context) {
return WillPopScope(
  onWillPop: _onWillPop,
  child: Scaffold(
    appBar: AppBar(
      title: Text("My Title"),
      actions: <Widget>[
        IconButton(
          icon: Icon(Icons.account_balance_wallet),
          onPressed: () {
            Navigator.push(context,
                MaterialPageRoute(builder: (context) => Data Screen()));
          },
        ),
      ],
      bottom: TabBar(
        controller: _tabController,
        tabs: _tabs,
      ),
    ),
    body: TabBarView(
      controller: _tabController,
      children: _children,
    ),
  ),
);
}

void onTabTapped(int index) {
setState(() {
  _currentIndex = index;
});
}

第一个屏幕

class FirstScreen extends StatefulWidget {
FirstScreen({Key key}) : super(key: key);
@override
FirstScreenState createState() {
return new FirstScreenState();
}
}

class FirstScreenState extends State<FirstScreen>
with AutomaticKeepAliveClientMixin<FirstScreen> {

Widget get historyCard {
return Container(
  height: 280,
  width: MediaQuery.of(context).size.width / 1,
  padding: EdgeInsets.only(top: 10.0, left: 20.0, right: 20.0),
  child: Card(
    elevation: 4.0,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10.0),
    ),
    child: Stack(
      children: <Widget>[
        ClipPath(
          clipper: ShapeBorderClipper(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10.0),
            ),
          ),
        ),
        Stack(alignment: Alignment.center, children: <Widget>[
          Positioned(
            top: 10,
            left: 10,
            child: Text("RECENT ACTIVITY",
                style: TextStyle(
                  fontSize: 14.0,
                )),
          ),
          Positioned(
            top: 0,
            right: 0,
            child: FlatButton(
              child: Text('MORE >'),
              onPressed: () => {},
              textColor: Colors.blueAccent, // JUMP TO SECOND TAB or ANY 
//OTHER TAB
            ),
          ),
        ]),
      ],
    ),
  ),
  );
  }

@override
Widget build(BuildContext context) {
return Scaffold(
  body: Column(children: [
    historyCard,
  ]),  
);
}
}

现在，我不确定如何通过单击按钮导航到任何标签，因为我将标签栏放置在MainScreen.dart内，或者必须将FirstPage代码更改为{ {1}}，那么只能单击并导航吗？

Answer 1

您可以在TabController中设置索引以更改当前标签，如下所示：在下面的示例中，“ MyFirstTab”中的TabBarView屏幕中有一个按钮，从该按钮中我们调用父类的“ StateKeeper”的changeMyTab（）。

import 'package:flutter/material.dart';

class MyTabController extends StatefulWidget {
  createState() {
    return StateKeeper();
  }
}

class StateKeeper extends State<MyTabController> with SingleTickerProviderStateMixin {

  TabController _tabController;
  final List<Tab> myTabs = <Tab>[
    new Tab(icon: Icon(Icons.directions_car),),
    new Tab(icon: Icon(Icons.directions_bike),),
    new Tab(icon: Icon(Icons.directions_boat),),
    new Tab(icon: Icon(Icons.directions_railway),),
  ];

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _tabController = new TabController(vsync: this, length: myTabs.length);

  }

  changeMyTab(){
    setState(() {
      _tabController.index = 2;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(

        length: 4,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(tabs: myTabs, controller: _tabController,),
            title: Text('Tabs Demo'),
          ),

          body: TabBarView(controller: _tabController, children: [
            MyFirstTab(onTabChangeCallback: () => {
                changeMyTab()
            },),
            Icon(Icons.directions_bike),
            Icon(Icons.directions_boat),
            Icon(Icons.directions_railway),
          ]),

        ),

      ),
    );
  }
}


class MyFirstTab extends StatefulWidget {
  const MyFirstTab({this.onTabChangeCallback});
  final TabChangeCallback onTabChangeCallback;

  createState() {
    return MyFirstTabStateKeeper(onTabChangeCallback);
  }
}

class MyFirstTabStateKeeper extends State<MyFirstTab> {

  TabChangeCallback onTabChangeCallback;

  MyFirstTabStateKeeper(TabChangeCallback onTabChangeCallback){
    this.onTabChangeCallback = onTabChangeCallback;
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }


  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        RaisedButton(
          child: Text('Change Tab'),
          onPressed: onTabChangeCallback,
        ),
      ],
    );
  }
}

typedef TabChangeCallback = void Function();

在按钮上单击导航到选项卡屏幕

1 个答案: