Question

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

TabBar具有3个标签（例如标签A，B和C），TabBarView具有3个视图，并且该TextField位于最后一个标签（标签C）。

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

我在initState中创建了控制器。像这样：

@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()
                        ],
                      ))));
  }

  }

Answer 1

我尝试过。检查以下代码。如果仍然遇到相同的问题，请共享实施。

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选定的索引

1 个答案: