Question

在一个标签中，我有一个TextFormField，在另一个标签中，只有一个文本列表。当我选择“文本”字段时，键盘是打开的，然后我跳到第二个选项卡，仍然显示键盘。我什至可以写东西，当我回到选项卡1时，我会明白为什么要键入。

您知道我该如何对第二个Tab进行操作，以使焦点从文本字段中移出？

DefaultTabController(      
      length: 2,
      child: Scaffold(
          appBar: AppBar(
            title: Text('Manage Products'),
            bottom: TabBar(tabs: <Widget>[
              Tab(icon: Icon(Icons.create), text: 'Create Product'),
              Tab(icon: Icon(Icons.list), text: 'My Products'),
            ]),
          ),
          body: TabBarView(            
            children: <Widget>[
              ProductEditPage(addProduct: addProduct),
              ProductListPage(products, updateProduct),
            ],
          )),
    );

Tab1

Tab2

解决代码

应用@ nick.tdr建议后，示例代码如下：

class _Test extends State<Test> with TickerProviderStateMixin {
  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(vsync: this, length: 2);
    _tabController.addListener(() {
      if (_tabController.indexIsChanging) {
        FocusScope.of(context).requestFocus(new FocusNode());
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('2 Tabs'),
        bottom: TabBar(controller: _tabController, tabs: <Widget>[
          Tab(text: 'Tab with Text Field'),
          Tab(text: 'Empty Tab'),
        ]),
      ),
      body: TabBarView(
        controller: _tabController,
        children: <Widget>[
          Container(
            child: TextFormField(
              decoration: InputDecoration(labelText: 'Title'),
            ),
          ),
          Container()
        ],
      ),
    );
  }
}

Answer 1

我改进了@nick.tdr 的回答。

对于标签，您需要执行以下操作；

controller.addListener((){

  if(controller.indexIsChanging)
    {
      FocusScope.of(context).unfocus();
    }
});

如果您想在选项卡之间滑动而不是单击选项卡按钮时使用此功能，请尝试以下操作；

controller.addListener((){
    FocusScope.of(context).unfocus();
});

控制器是你的标签控制器。

Answer 2

您可以在脚手架上添加手势检测器并移开焦点。但这对选项卡不起作用。对于选项卡，您需要执行以下操作：

controller.addListener((){

  if(controller.indexIsChanging)
    {
      FocusScope.of(context).detach();
    }
});

其中控制器是您的标签控制器。希望有帮助

Answer 3

我认为将整个delete = (id) => { axios.get('http://localhost:3000/api/users/delete/' + id) .then((resultOfSuccesfulDeleting) => console.log(resultOfSuccesfulDeleting)) .catch(err => console.log(err)) } {this.state.users.map(function (singleuser, i) { const shouldHide = user.group.toString() === singleuser.group.toString() return shouldHide ? null : <tr key={i} style={{ color: '#fff' }}> <td>{singleuser.name}</td> <td>{singleuser.email}</td> <td style={{ display: 'none' }} selected={shouldHide}>{singleuser.group}</td> <td><button onClick={() => this.delete(singleuser._id)} className="waves-effect waves-light btn-small red">Edit</button></td> </tr> }.bind(this)) }主体包裹成Scaffold应该可以解决您的问题。

GestureDetector

这只是使您可以集中精力于您从上一个窗口中删除焦点的窗口小部件。

Answer 4

对我来说，我发现最好的方法是在 FocusNode 回调中设置的 tabChange 侦听器上请求一个新的 didChangeDependencies()：

在 build() 方法中：

TabBar(
   controller: tabController,
      .
      .
      .
  ),

didChangeDependencies 回调：

@override
void didChangeDependencies() {
  setState(() {
    tabController.addListener(handleTabChange);
  });
  super.didChangeDependencies();
}

监听器实现：

handleTabChange() {
 // do whatever handling required first
  setState(() {
    FocusScope.of(context).requestFocus(new FocusNode());
  });
}

更改为TabBarView中的其他选项卡时，键盘仍显示

4 个答案: