Flutter开发：如何获取TextField输入值并按索引交叉拼接字符

你需要补充状态变量存储计算结果，再实现按钮点击的字符拼接逻辑，最后新增结果展示组件即可，修改如下：

步骤说明 #

• 新增状态变量存储计算结果：在_TelaPrincipalState类中添加 String _result = ''; 用来保存拼接后的输出内容
• 实现按钮点击逻辑：
  1. 通过firstTextEditingController.text和secondTextEditingController.text直接获取两个输入框的用户输入值
  2. 取两个输入字符串的最大长度作为循环上限，遍历每个索引位
  3. 每个索引位分别取两个输入对应位置的字符拼接，累加所有拼接结果得到最终输出
  4. 调用setState更新界面展示的结果
• 在按钮下方新增Text组件展示计算结果

完整代码 #

import 'package:flutter/material.dart';

class TelaPrincipal extends StatefulWidget {
  const TelaPrincipal({super.key});

  @override
  _TelaPrincipalState createState() => _TelaPrincipalState();
}

class _TelaPrincipalState extends State<TelaPrincipal> {
  final firstTextEditingController = TextEditingController();
  final secondTextEditingController = TextEditingController();
  // 新增存储结果的状态变量
  String _calculatedResult = '';

  // 字符拼接逻辑
  void _calculateCombineString() {
    String firstStr = firstTextEditingController.text;
    String secondStr = secondTextEditingController.text;
    StringBuffer resultBuffer = StringBuffer();

    // 取两个字符串的最大长度作为循环边界
    int maxLength = firstStr.length > secondStr.length ? firstStr.length : secondStr.length;

    for (int i = 0; i < maxLength; i++) {
      // 索引小于对应字符串长度时取字符，否则取空
      if (i < firstStr.length) {
        resultBuffer.write(firstStr[i]);
      }
      if (i < secondStr.length) {
        resultBuffer.write(secondStr[i]);
      }
    }

    setState(() {
      _calculatedResult = resultBuffer.toString();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(
            'App name example',
            style: TextStyle(
              fontFamily: 'Merienda',
              fontSize: 23.0,
            ),
          ),
        ),
        body: Padding(
          padding: const EdgeInsets.all(120.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              TextField(
                controller: firstTextEditingController,
                decoration: InputDecoration(
                  hintText: 'Insert first input',
                  filled: true,
                  contentPadding: EdgeInsets.all(20),
                ),
                style: TextStyle(color: Colors.black),
              ),
              const SizedBox(
                height: 20,
              ),
              TextField(
                controller: secondTextEditingController,
                decoration: InputDecoration(
                  hintText: 'Insert second input',
                  filled: true,
                  contentPadding: EdgeInsets.all(20),
                ),
                style: TextStyle(color: Colors.black),
              ),
              const SizedBox(
                height: 55,
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                    padding:
                    EdgeInsets.symmetric(horizontal: 50, vertical: 18)),
                // 绑定点击事件
                onPressed: _calculateCombineString,
                child: Text('Calculate'),
              ),
              const SizedBox(height: 30,),
              // 展示计算结果
              Text(
                '计算结果：$_calculatedResult',
                style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
              )
            ],
          ),
        ));
  }
}

效果验证 #

输入第一个框为Az、第二个框为Dk时，点击按钮输出结果为ADzk，完全符合需求。如果两个输入长度不一致，超出较短输入长度的字符会直接追加到结果末尾。

内容的提问来源于stack exchange，提问作者bilbo_bo