flutter - TabBar Controller 从另一个类更改页面

Question

我希望能够从另一个类控制在主页面中查看的页面。 厌倦了使用全局键，但它不接受将 Controller 发送到另一个类，我创建了一个方法并尝试从头等舱控制它，但它仍然不起作用，它给了我这个错误

处理手势时抛出以下 NoSuchMethodError:I/flutter (16262): setter 'index=' 被调用为 null。I/flutter (16262): 接收器: nullI/flutter (16262): 尝试调用:index=1

这是我的家庭类

import 'package:flutter/material.dart';
import 'package:flutter_tabs/first.dart';
import 'package:flutter_tabs/second.dart';
import 'package:flutter_tabs/third.dart';

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> with SingleTickerProviderStateMixin {

  TabController controller;
  //var contKey=GlobalKey<TabBarView>();

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar:AppBar(
        title: Text('hello'),
        bottom: TabBar(controller: controller,tabs: <Widget>[
          Tab(icon: Icon(Icons.ac_unit),),
          Tab(icon: Icon(Icons.library_books),)
        ]),
      ),
      body: TabBarView(controller: controller,children: <Widget>[
        First(),
        Second(),

      ]),
      floatingActionButton: FloatingActionButton(onPressed: ()=>controller.animateTo(controller.index =1)),

    );


  }


  void next(int num){
    debugPrint(num.toString());
      controller.animateTo(controller.index = num);


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

    controller =TabController(length: 2, vsync: this);
  }

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

这是我的第一个类

import 'package:flutter/material.dart';
import 'package:flutter_tabs/Home.dart';
import 'package:flutter_tabs/second.dart';
class First extends StatefulWidget {
  @override
  _FirstState createState() => _FirstState();
}

class _FirstState extends State<First> {
Home home = Home();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Column(
          children: <Widget>[
            FlatButton(onPressed: ()=>debugPrint(''), child: Text('first')),
            FlatButton(onPressed: (){
              Home().createState().next(1);
            }, child: Text('click')),
          ],
        ),
      ),
    );
  }
}

这是我的第二堂课

import 'package:flutter/material.dart';

class Second extends StatefulWidget {
  @override
  _SecondState createState() => _SecondState();
}

class _SecondState extends State<Second> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: FlatButton(onPressed: ()=>debugPrint('presrt'), child: Text('second')),
      ),
    );
  }
}

我想要的是在解决这个问题后能够有一个类别列表，当用户点击一个类别时，它会自动显示第二页，其中包含该类别中的项目。

Answer 1

试试这个。这实际上对我有用。在另一个堆栈溢出问题中发现了这个，但我实际上找不到它。因此，如果有人确实在此处添加它。

import 'package:flutter/material.dart';

class MainClass extends StatefulWidget {
  final Widget child;
  int initialPage; //this sets the innitial page to open when main class opens. ie if a main class is opened from secondpage and innitialPage is set to 1 then it will show the second page as the tabpages start from 0.

  MainClass({this.child,@required this.initialPage});

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



class _MainClassState extends State<MainClass>
    with SingleTickerProviderStateMixin {
  TabController _tabController;


  @override
  void initState() {
    _tabController = TabController(vsync: this, length: 2, initialIndex: 0);

    super.initState();
  }

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

  //method to set the page. This method is very important.
  void _nextPage(int tab) {
    final int newTab = _tabController.index + tab;
    if (newTab < 0 || newTab >= _tabController.length) return;
    _tabController.animateTo(newTab);
  }

  @override
  Widget build(BuildContext context) {
    final Color color = Theme.of(context).primaryColor;
    return Scaffold(
      key: key,
      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 0.0,
        title: Text('TabBar Example'),
        centerTitle: true,
      ),
      bottomNavigationBar: TabBar(
        controller: _tabController,
        tabs: <Widget>[
          Tab(icon: Icon(Icons.home, Colors.blue)),
          Tab(icon: Icon(Icons.android, color: Colors.blue)),
        ],
      ),
      body: TabBarView(
        controller: _tabController,
        children: [
          //make sure the length is set to the number of pages. Also the tabs in the tabbar should be equal to no of pages.
          Center(child: Text("First Page")),//these are pages. You can add pages as your choice
          Center(child: Text("Second Page")),
          
        ],
      ),
    );
  }
}

如果你想从另一个页面调用它。比方说你想从一个按钮上调用它，使用下面的代码到按钮的 onpressed 事件

Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context) {
              return MainClass(initialPage: 1,); 

根据这个，它将返回包含选项卡 Controller 的主类的第二页，因为选项卡从 0 开始。希望这对您也有帮助:-)