Question

我希望有一个多行文本字段，可以在其中返回一些段落数据。我使用textInputAction属性将“换行”按钮更改为“完成”按钮，尽管它调用了onEditingComplete，但仍然没有退出文本字段。我知道这与专注有关，但是我无法确切地知道如何去做。

这是我的代码

TextField(
              onChanged: (text){
                print('On changed is called');
              },
              onEditingComplete: (){
                print('Editing is done ');
              },
              textInputAction: TextInputAction.done,
              maxLines: 6 ,

              controller: textEditingController,
              decoration: InputDecoration(
                  .....
              )
          ),

我该如何专注于完成按键？预先感谢

Answer 1

只需使maxLine：如下所示为空

new TextFormField(
           controller: controller,
           obscureText: obscure,
           focusNode: _focusNode,
           maxLines: null,
           keyboardType: inputtype,
           onSaved: (String val) {
             text = val;
           },
           decoration: new InputDecoration(labelText: hintText,
               enabledBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.transparent)),
               focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.transparent)),
               labelStyle: TextStyle(color: const Color(0xFF0C0738))),
         )

Answer 2

您可以使用FocusNode来控制焦点。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MyApp',
      home: MyWidget(),
    );
  }
}
class MyWidget extends StatefulWidget {
  @override
  State<MyWidget> createState() {
    return _MyWidget();
  }
}
class _MyWidget extends State<MyWidget> {
  FocusNode _focusNode;

  @override
  void initState() {
    super.initState();
    _focusNode = FocusNode();
  }
  @override
  void dispose() {
    super.dispose();
    _focusNode.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: TextField(
          focusNode: _focusNode,
          maxLines: 8,
          autofocus:false ,
          textInputAction: TextInputAction.done,
          onEditingComplete: () {
            print("edit");
            _focusNode.unfocus();
          },
        ),
      )
    );
  }
}

Answer 3

您是否使用onSubmitted:方法尝试过？

TextField(
  focusNode: myFocus,
  onSubmitted: (text) {
    myFocus.unfocus();
  },
),

Answer 4

接受的答案有问题。它要求您使用TextInputAction.done，这会严重限制多行TextFormField的功能。一个简单的解决方案是将focusNode与toggle一起使用。当表单字段成为焦点时，将激活该切换。

假设顶级元素是同一列的子元素，那么下面的内容就足够了

Row(
  mainAxisAlignment: MainAxisAlignment.end,
  children: <Widget>[
    focusNode.hasFocus
        ? FlatButton(
            color: Colors.green,
            child: Row(
              children: <Widget>[
                FaIcon(
                  Icons.done,
                  color: Colors.white,
                ),
                SizedBox(
                  width: 5.0,
                ),
                Text(
                  'Done',
                  style: Theme.of(context).textTheme.body1.copyWith(
                        fontWeight: FontWeight.w700,
                        color: Colors.white,
                      ),
                ),
              ],
            ),
            onPressed: () {
              setState(() {
                FocusScope.of(context).unfocus();
              });
            },
          )
        : Text(''),
  ],
),

Card(
  child: TextFormField(
    focusNode: focusNode, // The focusNode should be properly initiated and disposed
    controller: jobSpecificsController,
    maxLines: 3,
    keyboardType: TextInputType.text,
    textInputAction: TextInputAction.done,
    decoration: formElementDecoration.copyWith(hintText: 'Please enter the job details.'),
    onTap: () {
      setState(() {}); // Without this setState, you won't get the toggle in the iOS.
    },
  ),
),

Flutter-如何在多行文本字段中退出文本字段？

4 个答案: