动态生成TextField，并通过软键盘上的回车跳转到下一个TextField，最后一个TextField关闭软键盘

已于 2023-07-10 16:52:18 修改
阅读量419 收藏
点赞数
分类专栏： Flutter TextField 文章标签： 前端 flutter
于 2023-07-10 14:41:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46017665/article/details/131638054
版权

项目背景：

        近期Flutter项目有个需求，根据后端传过来的数据，动态生成检查项目卡片，卡片中动态生成5个检查结果录入的TextField和一个结果判定的TextField，结果判定的TextField中的内容根据5个检查结果自动判定OK和NG，并将OK背景色设置为绿色，NG背景色设置为红色。通过控制软键盘的回车键自动跳转到下一个TextField，最后一个TextField则关闭软键盘。

代码：

/// @Author JackMa
/// @Date 2023/7/6 11:56
///
/// @Description 初物检查界面

import 'package:flutter/material.dart';

class PrimerCheckContent extends StatefulWidget {
  static String routeName = "PrimerCheck";

  PrimerCheckContent({Key? key})
      : super(key: key);

  @override
  State<PrimerCheckContent> createState() => _PrimerCheckContentState();
}

class _PrimerCheckContentState extends State<PrimerCheckContent> {

  //初物检查项目
  List<Map<String, dynamic>> checkItem = [];
  //最后一个焦点对象，用以控制软键盘关闭
  FocusNode? lastFocusNode;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    
    // 实际项目从后端获取数据
    checkItem.add(
      {
        "insItem": "项目名称",
        "insCondition": "检查规格",
        "max": "10",
        "min": "0",
        "insUnit": "测量单位",
        //五个检查录入格子控制器
        "textEditControllers": [
          new TextEditingController(),
          new TextEditingController(),
          new TextEditingController(),
          new TextEditingController(),
          new TextEditingController(),
        ],
        //五个检查录入格子的状态，用来推断OK/NG
        "textEditStatus": [
          false,
          false,
          false,
          false,
          false,
        ],
        //五个检查录入格子焦点
        "focusNodes": [
          new FocusNode(),
          new FocusNode(),
          new FocusNode(),
          new FocusNode(),
          new FocusNode(),
        ],
        //判定格子的控制器
        "judgeController": new TextEditingController(),
        //通过来回切换true/false来触发组件刷新，防止键盘弹起时无法即使更新TextField的背景色
        "refresh": ValueNotifier<bool>(true)
      },
    );
    checkItem.add(
      {
        "insItem": "项目名称",
        "insCondition": "检查规格",
        "max": "10",
        "min": "",
        "insUnit": "测量单位",
        "textEditControllers": [
          new TextEditingController(),
          new TextEditingController(),
          new TextEditingController(),
          new TextEditingController(),
          new TextEditingController(),
        ],
        "textEditStatus": [
          false,
          false,
          false,
          false,
          false,
        ],
        "focusNodes": [
          new FocusNode(),
          new FocusNode(),
          new FocusNode(),
          new FocusNode(),
          new FocusNode(),
        ],
        "judgeController": new TextEditingController(),
        "refresh": ValueNotifier<bool>(true)
      },
    );
    checkItem.add(
      {
        "insItem": "项目名称",
        "insCondition": "检查规格",
        "max": "",
        "min": "0",
        "insUnit": "测量单位",
        "textEditControllers": [
          new TextEditingController(),
          new TextEditingController(),
          new TextEditingController(),
          new TextEditingController(),
          new TextEditingController(),
        ],
        "focusNodes": [
          new FocusNode(),
          new FocusNode(),
          new FocusNode(),
          new FocusNode(),
          new FocusNode(),
        ],
        "textEditStatus": [
          false,
          false,
          false,
          false,
          false,
        ],
        "judgeController": new TextEditingController(),
        "refresh": ValueNotifier<bool>(true)
      },
    );

    lastFocusNode = checkItem[2]["focusNodes"][4];
  }

  @override
  void dispose() {
    // 将焦点控制对象释放
    for (var item in checkItem) {
      for (var focusNode in item["focusNodes"]) {
        focusNode.dispose();
      }
    }
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: "动态生成TextField",
      ),
      body: Container(
        child: Column(
          children: [
            Container(
              width: MediaQuery.of(context).size.width,
              padding: EdgeInsets.only(left: ScreenAdapter.width(5)),
              height: ScreenAdapter.height(45),
              child: Row(
                children: [
                  Expanded(
                    child: itemTile(
                      "生产品番：",
                      "123123456456",
                      leadingFontSize: ScreenAdapter.sp(25),
                      titleFontSize: ScreenAdapter.sp(25),
                      strutLeading: 2.0,
                    ),
                  ),
                  SizedBox(
                    width: 120.0,
                  ),
                  Expanded(
                    child: itemTile(
                      "本体型号：",
                      "",
                      leadingFontSize: ScreenAdapter.sp(25),
                      titleFontSize: ScreenAdapter.sp(25),
                      strutLeading: 2.0,
                    ),
                  ),
                  SizedBox(
                    width: 120.0,
                  ),
                  Expanded(
                    child: itemTile(
                      "额定电压：",
                      "",
                      leadingFontSize: ScreenAdapter.sp(25),
                      titleFontSize: ScreenAdapter.sp(25),
                      strutLeading: 2.0,
                    ),
                  ),
                ],
              ),
            ),
            Expanded(
              child: ListView.builder(
                itemCount: checkItem.length,
                itemBuilder: (ctx, index) {
                  return checkItemCard(checkItem[index]);
                },
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget checkItemCard(var item) {
    /// description 检查项目卡片
    /// author JackMa
    /// Date 2023/7/7 18:18
    ///
    /// [item：检查项目对象]

    var fontSize = ScreenAdapter.sp(25);
    return Card(
      // 阴影颜色
      shadowColor: Colors.black,
      // 阴影高度
      elevation: 3,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10),
        side: BorderSide(
          color: Colors.grey,
          width: 2,
        ),
      ),
      child: Container(
        width: ScreenAdapter.width(1025),
        height: ScreenAdapter.height(280),
        padding: EdgeInsets.symmetric(horizontal: 10),
        child: Column(
          children: [
            Row(
              children: [
                Expanded(
                  child: itemTile(
                    "项目名称：",
                    item["insItem"],
                    leadingFontSize: fontSize,
                    titleFontSize: fontSize,
                    strutLeading: 2.0,
                  ),
                ),
                SizedBox(
                  width: 120.0,
                ),
                Expanded(
                  child: itemTile(
                    "检查规格：",
                    item["insCondition"],
                    leadingFontSize: fontSize,
                    titleFontSize: fontSize,
                    strutLeading: 2.0,
                  ),
                ),
              ],
            ),
            Row(
              children: [
                Expanded(
                  child: itemTile(
                    "规格上限：",
                    item["max"],
                    leadingFontSize: fontSize,
                    titleFontSize: fontSize,
                    strutLeading: 2.0,
                  ),
                ),
                SizedBox(
                  width: 120.0,
                ),
                Expanded(
                  child: itemTile(
                    "规格下限：",
                    item["min"],
                    leadingFontSize: fontSize,
                    titleFontSize: fontSize,
                    strutLeading: 2.0,
                  ),
                ),
                SizedBox(
                  width: 120.0,
                ),
                Expanded(
                  child: itemTile(
                    "单位：",
                    item["insUnit"],
                    leadingFontSize: fontSize,
                    titleFontSize: fontSize,
                    strutLeading: 2.0,
                  ),
                ),
              ],
            ),
            judgeWidget(item),
            SizedBox(
              height: 10,
            ),
            ValueListenableBuilder(
                valueListenable: item["refresh"],
                builder: (context, value, widget) {
                  return Row(
                    children: [
                      Text(
                        "判定：",
                        style: TextStyle(
                          fontSize: fontSize,
                        ),
                      ),
                      Expanded(
                        child: TextField(
                          textAlign: TextAlign.center,
                          decoration: InputDecoration(
                            border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(15.0),
                            ),
                            fillColor: item["judgeController"].text == "NG"
                                ? Colors.red
                                : item["judgeController"].text == "OK"
                                    ? Color.fromRGBO(103, 194, 58, 1)
                                    : Colors.white,
                            filled: true,
                          ),
                          style: TextStyle(
                            fontSize: fontSize,
                          ),
                          controller: item["judgeController"],
                          enabled: false,
                        ),
                      ),
                      Expanded(
                        child: Container(),
                        flex: 4,
                      )
                    ],
                  );
                })
          ],
        ),
      ),
    );
  }

  /// description 检查录入单元格组件
  /// author JackMa
  /// Date 2023/7/7 11:03
  /// 动态检查录入输入框
  judgeWidget(var item) {
    List<Widget> textfieldWidgetList = [];
    for (int i = 0; i < item["textEditControllers"].length; i++) {
      textfieldWidgetList.add(
        Expanded(
          child: StatefulBuilder(
            builder: (context, setInnerState) => TextField(
              keyboardType: TextInputType.number,
              textAlign: TextAlign.center,
              decoration: InputDecoration(
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(15.0),
                ),
                hintText: '请填写',
              ),
              focusNode: item["focusNodes"][i],
              //右下角键盘文字：下一项
              textInputAction: TextInputAction.next,
              style: TextStyle(
                  fontSize: ScreenAdapter.sp(25),
                  color: item["textEditStatus"][i] ? Colors.red : Colors.black),
              controller: item["textEditControllers"][i],
              onEditingComplete: () {
                try {
                  double inputNum =
                      double.parse(item["textEditControllers"][i].text);
                  setInnerState(() {
                    if (item["max"] != "" && item["min"] != "") {
                      item["textEditStatus"][i] =
                          inputNum >= double.parse(item["min"]) &&
                                  inputNum <= double.parse(item["max"])
                              ? false
                              : true;
                    } else if (item["max"] != "") {
                      item["textEditStatus"][i] =
                          inputNum <= double.parse(item["max"]) ? false : true;
                    } else if (item["min"] != "") {
                      item["textEditStatus"][i] =
                          inputNum >= double.parse(item["min"]) ? false : true;
                    }
                  });
                  changeStatus(item, setInnerState);
                  if (item["focusNodes"][i] != lastFocusNode) {
                    FocusScope.of(context).nextFocus();
                  } else {
                    item["focusNodes"][i].unfocus();
                  }
                } catch (e) {
                  showToast("只能输入纯数字！");
                  item["textEditControllers"][i].text = "";
                  item["textEditStatus"][i] = false;
                  changeStatus(item, setInnerState);
                }
              },
            ),
          ),
        ),
      );
      textfieldWidgetList.add(
        const SizedBox(
          width: 10,
        ),
      );
    }
    textfieldWidgetList.removeLast();
    return Row(
      children: textfieldWidgetList,
    );
  }

  /// description 根据检查结果修改判定状态
  /// author JackMa
  /// Date 2023/7/10 10:26
  changeStatus(var item, setInnerState) {
    //是否有异常
    bool flag = false;
    for (int i = 0; i < item["textEditStatus"].length; i++) {
      if (item["textEditStatus"][i]) {
        setInnerState(() {
          item["judgeController"].text = "NG";
          item["refresh"].value = !item["refresh"].value;
        });
        flag = true;
        break;
      }
    }
    if (!flag) {
      //是否有空的判定格子
      bool hasEmpty = false;
      for (int i = 0; i < item["textEditControllers"].length; i++) {
        if (item["textEditControllers"][i].text == "") {
          setInnerState(() {
            item["judgeController"].text = "";
            item["refresh"].value = !item["refresh"].value;
          });
          hasEmpty = true;
          break;
        }
      }
      if (!hasEmpty) {
        setInnerState(() {
          item["judgeController"].text = "OK";
          item["refresh"].value = !item["refresh"].value;
        });
      }
    }
  }
}

效果图：

 

weixin_46017665
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Flutter漂亮登陆界面，TextField回车光标、焦点跳转下个TextField，最后一个自动点击登陆，源码提供下载
05-28
flutter在开发登陆界面的时候，输入内容后回车光标要跳转到下个TextField，有时FocusScope.of(context).requestFocus，不起作用，经过多次查找资料，最后找到一个相对适应实际应用的方法，提供源码下载 ，请查阅！ 使用在多个项目中 开源项目，放心下载
轻松掌握Flutter中的键盘操作技巧
m0_69656288的博客
04-26 2290
最后，让我们来看看如何自定义键盘。如果你希望在某些情况下使用不同于系统键盘的键盘，那么可以使用GestureDetector和Overlay来实现。bottom: 0,left: 0,right: 0,),),),],),),),// 显示自定义键盘},),),复制代码在上面的示例中，我们创建了一个OverlayEntry并将其放置在GestureDetector中。当你点击文本框时，自定义键盘会出现在底部。你可以根据自己的需要修改键盘的布局和样式。
Flutter 基础篇（九）—— 输入框
最新发布
2401_85729780的博客
06-22 1474
小编这些年深知大多数初中级Android工程师，想要提升自己，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！资料⬅专栏获取Text(‘隐藏键盘’),
Flutter TextField属性详解
weixin_34290352的博客
11-16 681
版权声明：本文为博主原创文章，转载请注明出处！ 属性介绍 TextEditingController controller = TextEditingController(); Widget buildTextField(TextEditingController controller) { return TextField( //控制正在编辑的文本。通过其可以拿到输入的...
Flutter控件——常用控件：TextField
wzj_what_why_how的博客
06-16 972
flutter 文本编辑框
Android控件EditText之点击软键盘中的回车键不换行，而是跳到下一个输入框或隐藏软键盘的方法；EditText设置android:maxLines="1"无效的原因
zhl101020的博客
09-11 1718
  解决方法：         只需在布局文件中的EditText中设置属性android:inputType="text" 或设置属性android:singleLine="true"即可。 注意：由于android:singleLine="true"已过时，可能你会使用android:maxLines="1"来替代singleLine，但是会发现设置无效，这时需要配上android:in...
点击textField,屏幕下方自定义UIView随软键盘同时推出和退下
06-30
总之，实现“点击textField,屏幕下方自定义UIView随软键盘同时推出和退下”的功能，需要掌握事件处理、键盘通知、布局管理以及动画技巧。通过这些技术的综合运用，我们可以为用户提供更流畅、更人性化的交互体验。
qml 软键盘 虚拟键盘
04-27
在某些场景下，如移动设备或嵌入式系统中，我们可能需要对软键盘的出现和隐藏进行精细化管理，或者完全自定义一个虚拟键盘来满足特定需求。 描述中提到的问题是"C++程序中调用setAutoSipEnabled不起作用"。`...
iOS让软键盘消失的简单方法
09-02
然而，在某些情况下，我们可能希望在用户完成输入后，或者用户点击屏幕其他区域时自动隐藏这个软键盘，以提供更好的用户体验。本文将详细介绍两种简单方法来实现这一功能。 首先，一种常见的做法是利用文本输入控件...
自定义textfield
06-24
2. **占位符定制**：默认的占位符文本颜色较淡，如果希望更加突出，可以创建一个自定义`UILabel`作为占位符，并添加到`UITextField`的子视图中。 3. **字体与对齐方式**：通过`font`属性调整字体大小和类型，使用`...
flash 制作仿windows逼真软键盘
05-19
- 通过在事件处理函数中修改`TextField`的`text`属性，可以模拟用户在软键盘上输入字符。 5. **功能键处理**： - 添加退格键，实现删除功能。当退格键被点击时，从`TextField`的`text`属性中移除最后一个字符。 ...
Android控件EditText之点击软键盘中的回车键不换行，而是跳到下一个输入框或隐藏软键盘的方法
chaomihei164的博客
07-18 1199
需要同时设定android:maxLines="1"和android:inputType="text"才可以生效 <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:maxLines="1" android:inputType="text"/>...
ExtJs中如何动态添加一个textfield的文本框
liyanlei的专栏
10-19 2077
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> />    //改为自己的路径     //改为自己的路径     var oForm;     var n = 0;     Ext.onReady(function() {         oForm = new Ext.FormPanel({  
在flutter 如何隐藏软键盘
爱孔孟
03-02 3086
Flutter提供了多种方法来隐藏软键盘
SwiftUI TextField和Form实现输入完成后自动跳转到下个输入框
iCloudEnd的博客
04-26 831
本文价值与收获 看完本文后，您将能够作出下面的界面 看完本文您将掌握的技能 用form搭建注册界面 实现从一个输入框自动切换到下一个textfield 用变量控制键盘的弹出与关闭 掌握@State 使用 掌握@Binding 的使用 代码 1、主界面 struct KeyboardTypeView: View { @State var firstName = "" @Sta...
Flutter输入框TextField属性介绍及相关问题
weixin_47401153的博客
04-27 1968
Flutter输入框TextField属性介绍及相关问题
Flutter TextFiled换行显示
徐代龙的技术专栏
07-11 7392
在Flutter中，TextFiled中一直输入内容的话，会一直向最后显示，只有一行，这样的功能在开发中很少有用到。这时候我们只需要在TextFiled中进行设置。 Container( alignment: Alignment.topLeft, child: TextField( maxLines: 10, ...
java按tab换到下一个jtextfield_java – 覆盖VK_Tab焦点操作
weixin_36080653的博客
02-25 216
美好的一天！我想将keyevent监听器添加到jTextField,这样如果用户按下tab键,则插入位置将转到jtextField内部文本的末尾,这是我的代码：private void jTextField1KeyPressed(java.awt.event.KeyEvent evt) {if(evt.getKeyCode()==KeyEvent.VK_TAB){evt.consume();jTe...
Jetpack Compose帮我封装一个TextField自动获取焦点并且弹出软键盘的函数
04-30
好的，可以尝试以下代码实现： ``` @Composable fun AutoFocusTextField( value: String, onValueChange: (String) -> Unit, modifier: Modifier = Modifier ) { TextField( value = value, onValueChange = onValueChange, modifier = modifier .focusRequester(FocusRequester()) .onFocusEvent { if (it.isFocused) { LocalSoftwareKeyboardManager.current?.showSoftwareKeyboard() } }, singleLine = true ) LaunchedEffect(Unit) { withTimeout(100) { // Wait for layout & measurement passes to occur frameworkViewRef.await().requestFocus() } } AndroidView( factory = { ctx -> EditText(ctx).apply { setTextColor(Color.Transparent.toAndroidColor()) setBackgroundColor(Color.Transparent.toAndroidColor()) } }, update = { editText -> editText.setText(value) editText.hideKeyboardOnIme(false) frameworkViewRef = WeakReference(editText) }, modifier = Modifier .fillMaxSize() .focusable(true) .focusRequester(focusRequester) .onFocusEvent { if (it.isFocused) { LocalSoftwareKeyboardManager.current?.showSoftwareKeyboard() } } ) } private var frameworkViewRef = WeakReference<View>(null) private val focusRequester = FocusRequester() ``` 这里我们使用Jetpack Compose的TextField来实现输入框的UI，同时使用AndroidView来实现EditText的实际输入框。我们通过使用FocusRequester和软键盘管理来实现输入框自动获取焦点和弹出软键盘的功能。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值