我有一个脚手架，其中有一个 TabBar、TabBarView 和一个 TextField。

TabBar 有 3 个选项卡(例如选项卡 A、B 和 C)，TabBarView 有 3 个 View ，这个 TextField 位于最后一个选项卡(选项卡 C)。

一切正常，但每当我将焦点放在 TextField 上键入内容时，TabBar 就会从选项卡 C 更改为选项卡 A。非常烦人。这不应该发生。 TabBarView 保持不变。

我在 initState 中创建了 Controller 。像这样:

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

知道为什么会这样吗？

代码:

class AtendimentoOrtoWidget extends StatefulWidget {
  TabController _tabBarController;

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


class _AtendimentoOrtoWidgetState extends State<AtendimentoOrtoWidget>
    with SingleTickerProviderStateMixin {

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


    widget._tabBarController =
        new TabController(length: 3, vsync: this);

  }

 @override
    Widget build(BuildContext context) {
    return SafeArea(
        top: false,
        child: new DefaultTabController(
            length: 3,
            child: new Scaffold(
                resizeToAvoidBottomPadding: false,
                appBar: new AppBar(
                  toolbarOpacity: 0.5,
                  automaticallyImplyLeading: true,
                  backgroundColor: Colors.white,
                  elevation: 2.0,
                  title: new TabBar(
                    controller: widget._tabBarController,
                    unselectedLabelColor: Colors.black,
                    indicatorColor: Colors.black,
                    labelColor: Colors.black,
                    // indicatorWeight: 0.0,
                    isScrollable: true,
                    labelStyle: new TextStyle(
                        fontSize: 16.0,
                        fontFamily: 'Caecilia',
                        fontWeight: FontWeight.w700),
                    tabs: <Widget>[
                      new Tab(
                              text: "TAB A",
                      ),
                      new Tab(
                              text: "TAB B",
                      ),
                      new Tab(
                              text: "TAB C",
                            )
                    ],
                  ),
                ),
                backgroundColor: Colors.white,
                body: new TabBarView(
                        controller: widget._tabBarController,
                        children: <Widget>[
                          new Container(),
                          new Container(),
                          new TextField()
                        ],
                      ))));
  }

  }

最佳答案

我试过了。检查下面的代码。如果您仍然面临同样的问题，请分享您的实现。

import 'package:flutter/material.dart';

class TabScreen extends StatefulWidget {
  @override
  _TabScreenState createState() => _TabScreenState();
}

class _TabScreenState extends State<TabScreen> with SingleTickerProviderStateMixin {
  GlobalKey<ScaffoldState> _scaffoldKey = new GlobalObjectKey<ScaffoldState>('TabScreen');

  TabController tabController;

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        title: Text("Tab Demo"),
      ),
      backgroundColor: Colors.white,
      body: Column(
        children: <Widget>[
          TabBar(
            controller: tabController,
            tabs: <Widget>[
              Tab(
                child: Container(
                  child: new Text(
                    'A',
                    style: TextStyle(color: Colors.black),
                  ),
                ),
              ),
              Tab(
                child: Container(
                  child: Text(
                    'B',
                    style: TextStyle(color: Colors.black),
                  ),
                ),
              ),
              Tab(
                child: Container(
                  child: Text(
                    'C',
                    style: TextStyle(color: Colors.black),
                  ),
                ),
              )
            ],
          ),
          Flexible(
              child: TabBarView(
            controller: tabController,
            children: <Widget>[
              Placeholder(),
              Placeholder(),
              ListView(
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: TextField(
                      decoration: InputDecoration(labelText: "Name"),
                    ),
                  ),
                ],
              ),
            ],
          ))
        ],
      ),
    );
  }
}

关于Flutter - TextField 焦点改变 TabBar 选中索引，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56395058/