dart 选择下拉按钮时,TextField焦点卡住

xsuvu9jc  于 2023-07-31  发布在  其他
关注(0)|答案(5)|浏览(124)

我有一个文本字段和一个下拉菜单,都由一个Bloc控制。我遇到的问题是,一旦文本字段被选中,如果用户试图从下拉菜单中选择某个内容,它不会给予焦点。菜单出现,然后在片刻后消失,焦点仍然在文本字段上。
下面是一个基本的应用程序来演示这个问题:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Textfield Focus Example',
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {

  FormBloc formBloc = FormBloc();

  final List<DropdownMenuItem> userMenuItems = ['Bob', 'Frank']
      .map((String name) => DropdownMenuItem(
            value: name,
            child: Text(name),
          ))
      .toList();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            // user - drop down menu
            Row(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text('To: '),
                StreamBuilder<String>(
                    stream: formBloc.selectedUser,
                    builder: (context, snapshot) {
                      return DropdownButton(
                          items: userMenuItems,
                          value: snapshot.data,
                          onChanged: formBloc.selectUser);
                    }),
              ],
            ),

            // amount - text field
            Row(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text('Amount: '),
                Container(
                    width: 100.0,
                    child: StreamBuilder<double>(
                        stream: formBloc.billAmount,
                        builder: (context, snapshot) {
                          return TextField(
                            keyboardType: TextInputType.number,
                            onChanged: formBloc.newBillAmount,
                          );
                        })),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

class FormBloc {
  StreamController<String> _selectedUserController = StreamController<String>();
  Stream<String> get selectedUser =>
      _selectedUserController.stream;
  Function get selectUser => _selectedUserController.sink.add;

  //Amount
  StreamController<double> _billAmountController = StreamController<double>();
  Stream<double> get billAmount =>
      _billAmountController.stream;
  void newBillAmount(String amt) =>
      _billAmountController.sink.add(double.parse(amt));

  void dispose() {
    _selectedUserController.close();
    _billAmountController.close();
  }
}

字符串
我是否需要手动声明textField的FocusNode并告诉它何时给予焦点?还是有其他原因说明文本字段占据了所有的注意力?

dldeef67

dldeef671#

很抱歉,您需要在DropDownButton Widget的onTapListener中添加以下代码。当您在下拉菜单中选择或点击屏幕外时,它会移除文本字段的焦点。谢谢

FocusScope.of(context).requestFocus(new FocusNode());

字符串

hfyxw5xn

hfyxw5xn2#

将这行代码添加到TextField:focusNode: FocusNode(canRequestFocus: false)
这应该可以防止您的TextField在单击下拉列表后请求焦点。
代码:

// amount - text field
Row(
    mainAxisSize: MainAxisSize.min,
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
    Text('Amount: '),
    Container(
        width: 100.0,
        child: StreamBuilder<double>(
            stream: formBloc.billAmount,
            builder: (context, snapshot) {
                return TextField(
                focusNode: FocusNode(canRequestFocus: false)
                keyboardType: TextInputType.number,
                onChanged: formBloc.newBillAmount,
                );
            })),
    ],
)

字符串

brvekthn

brvekthn3#

这个问题已经解决,并合并到Flutter主通道
https://github.com/flutter/flutter/pull/42482

这绕过了一个事实,即我们目前不能在同一页面上有下拉列表和文本字段,因为当下拉列表获得焦点时键盘消失会导致指标变化,并且下拉列表在激活时立即消失。

m2xkgtsf

m2xkgtsf4#

上面的答案只有在你不想调用requestFocus()方法的情况下才是正确的。但在我的情况下,这是一个聊天应用程序,我希望文本字段得到重点时,消息是滑动。如果设置boolean参数canRequestFocus,则为false。那我就做不到。
在chatPage应用栏中,我使用了一个弹出菜单,这导致了同样的问题(无意中获得焦点)
所以,对我有用的是,在popupmenu的onSelected(String str)方法的顶部,我调用了以下语句:

messageFocusNode.nextFocus(); //messageFocusNode is the focusNode of the TextField.

字符串
虽然我不知道为什么和如何,这对我很有效。我是新手,如果你知道原因请更新我的答案。

dhxwm5r4

dhxwm5r45#

onTap()onChanged()添加FocusScope.of(context).requestFocus(new FocusNode())

DropdownButtonFormField(
                        value: 'Disable',
                        isExpanded: true,
                        decoration: InputDecoration(
                          enabledBorder: InputBorder.none,
                        ),
                        hint: Center(
                          child: Text("data"),
                        ),`
                        items: menuItems,
                        onTap: () {
                          FocusScope.of(context).requestFocus(new FocusNode());
                        },
                        onChanged: (value) {
                          FocusScope.of(context).requestFocus(new FocusNode());
                         
                        },
                      ),

字符串

相关问题