带颤动的默认TabBarController

Question

我正在使用defaulttabbarcontroller

这是代码

tab.dart

void main() => runApp(TabBar1());
final key = new GlobalKey<TabBar1State>();

class TabBar1 extends StatefulWidget {
  TabBar1({Key key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => TabBar1State();
}

class TabBar1State extends State<TabBar1> with SingleTickerProviderStateMixin {
  TabController tabController;

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

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      home: DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: PreferredSize(
            child: AppBar(
              backgroundColor: Colors.greenAccent,
              bottom: TabBar(
                controller: tabController,
                tabs: [
                  Tab(
                    child: Text("Login"),
                  ),
                  Tab(
                    child: Text("Sign Up"),
                  ),
                ],
                indicatorColor: Colors.black,
              ),
              flexibleSpace: Container(
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    colors: [
                      Colors.red,
                      Colors.orange,
                    ],
                  ),
                ),
              ),
            ),
            preferredSize: Size.fromHeight(200.0),
          ),
          body: TabBarView(
            controller: tabController,
            children: [
              LoginApp(),
              SignUpApp(),
            ],
          ),
        ),
      ),
    );
  }
}

这是我的片段，我想从登录页面调用我的SignUp（）选项卡

LoginApp（）页面代码段

 Padding(
                      padding: EdgeInsets.only(top: 30, bottom: 30),
                      child: new RichText(
                        text: TextSpan(
                            text: "Don't have an account? ",
                            style: DefaultTextStyle.of(context).style,
                            children: <TextSpan>[
                              new TextSpan(
                                  text: 'Sign Up',
                                  style: new TextStyle(
                                      fontWeight: FontWeight.bold),
                                  recognizer: TapGestureRecognizer()
                                    ..onTap = () {
                                      key.currentState.tabController.animateTo(
                                          (key.currentState.tabController
                                                      .index +
                                                  1) %
                                              2);
                                    }),
                            ]),
                      ))

但我得到以下错误

处理手势时抛出以下NoSuchMethodError：I / flutter（17770）：在null上调用getter'tampController'。 I / flutter（17770）：Receiver：null I / flutter（17770）：尝试调用：tabController I / flutter（17770）：

怎么做同样的，我做错了什么？请帮忙

Answer 1

显然，tabcontroller没有得到任何东西。以下代码可能是您正在寻找的

        import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  static final _myTabbedPageKey = new GlobalKey<_MyTabbedPageState>();

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

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      home: new MyTabbedPage(
        key: MyApp._myTabbedPageKey,
      ),
    );
  }
}

class MyTabbedPage extends StatefulWidget {
  const MyTabbedPage({Key key}) : super(key: key);

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

class _MyTabbedPageState extends State<MyTabbedPage> with SingleTickerProviderStateMixin {
  final List<Tab> myTabs = <Tab>[
    new Tab(text: 'LEFT'),
    new Tab(text: 'RIGHT'),
  ];

  TabController _tabController;

  @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 new Scaffold(
      appBar: new AppBar(
        title: new Text("Tab demo"),
        bottom: new TabBar(
          controller: _tabController,
          tabs: myTabs,
        ),
      ),
      body: new TabBarView(
        controller: _tabController,
        children: [
          LoginApp(),
      SignUpApp(),
      ],
      ),
    );
  }
}

class LoginApp extends StatefulWidget {
  @override
  _LoginAppState createState() => _LoginAppState();
}

class _LoginAppState extends State<LoginApp> {
  @override
  Widget build(BuildContext context) {
    return Padding(
        padding: EdgeInsets.only(top: 30, bottom: 30),
        child: new RichText(
          text: TextSpan(
              text: "Don't have an account? ",
              style: DefaultTextStyle.of(context).style,
              children: <TextSpan>[
                new TextSpan(
                    text: 'Sign Up',
                    style: new TextStyle(
                        fontWeight: FontWeight.bold),
                    recognizer: TapGestureRecognizer()
                      ..onTap = () =>
                        MyApp._myTabbedPageKey.currentState._tabController.animateTo((MyApp._myTabbedPageKey.currentState._tabController.index + 1) % 2),
                ),

              ]),
        ));
  }
}

class SignUpApp extends StatefulWidget {
  @override
  _SignUpAppState createState() => _SignUpAppState();
}

class _SignUpAppState extends State<SignUpApp> {
  @override
  Widget build(BuildContext context) {
    return Text('godbye');
  }
}

Answer 2

这是我自己的问题Reference link的答案

tab.dart

 void main() => runApp(TabBar1());
    //I took stateless widget
    class TabBar1 extends StatelessWidget {
      static final myTabbedPageKey = new GlobalKey<_TabLoginSignUpState>();

      @override
      Widget build(BuildContext context) {
        return new MaterialApp(
            debugShowCheckedModeBanner: false,
    //called my stateful widget

            home: TabLoginSignUp(
              key: TabBar1.myTabbedPageKey,
            ));
      }
    }

    class TabLoginSignUp extends StatefulWidget {
      TabLoginSignUp({Key key}) : super(key: key);

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

    class _TabLoginSignUpState extends State<TabLoginSignUp>
        with SingleTickerProviderStateMixin {
      TabController tabController;

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

      @override
      Widget build(BuildContext context) {
        return DefaultTabController(
          length: 2,
          child: Scaffold(
            appBar: PreferredSize(
              child: AppBar(
                backgroundColor: Colors.greenAccent,
                bottom: TabBar(
                  controller: tabController,
                  tabs: [
                    Tab(
                      child: Text("Login"),
                    ),
                    Tab(
                      child: Text("Sign Up"),
                    ),
                  ],
                  indicatorColor: Colors.black,
                ),
                flexibleSpace: Container(
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      colors: [
                        Colors.red,
                        Colors.orange,
                      ],
                    ),
                  ),
                ),
              ),
              preferredSize: Size.fromHeight(200.0),
            ),
            body: TabBarView(
              controller: tabController,
              children: [
                LoginApp(),
                SignUpApp(),
              ],
            ),
          ),
        );
      }
    }

LoginApp中更新的片段（）

Padding(
                      padding: EdgeInsets.only(top: 30, bottom: 30),
                      child: new RichText(
                        text: TextSpan(
                            text: "Don't have an account? ",
                            style: DefaultTextStyle.of(context).style,
                            children: <TextSpan>[
                              new TextSpan(
                                  text: 'Sign Up',
                                  style: new TextStyle(
                                      fontWeight: FontWeight.bold),
                                  recognizer: TapGestureRecognizer()
                                    ..onTap = () {
                                      //called like this on click TabBar1.myTabbedPageKey.currentState.tabController
                                          .animateTo((TabBar1.myTabbedPageKey.currentState
                                                      .tabController.index +
                                                  1) %
                                              2);
                                    }),
                            ]),
                      ))