Flutter中文本框值转HEX编码问题：onPressed中hexString为空

问题根源 #

你在build()方法内部定义了hexString局部变量，每次调用setState()都会触发build()重新执行，此时hexString会被重新初始化为空字符串。尽管onChanged回调里通过setState修改了这个局部变量，但build重建后该值会被重置，最终导致onPressed中打印的是空值。

修复方案 #

将hexString提升为_MyHomePageState类的成员变量，这样它的生命周期与State实例绑定，不会在build重建时被重置。

修正后的完整代码

import 'dart:async';
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:flutter/material.dart';
import 'package:australremote/screens/screen4.dart';
import 'package:convert/convert.dart';

void main() {
  runApp(MyHomePage());
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {
  final _textController = TextEditingController();
  final String title = '';
  final String subtitle = '';
  // 将hexString改为类成员变量
  String hexString = '';

  @override
  Widget build(BuildContext context) {
    final args = ModalRoute.of(context)?.settings?.arguments as List<String>;
    String ssid = args[0];
    String auth = args[1];

    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("Your selected SSID is :$ssid"),
            Text("Your authentication is :$auth"),
            TextField(
              controller: _textController,
              decoration: InputDecoration(hintText: "Enter the password of your Wifi network"),
              onChanged: (value) {
                setState(() {
                  hexString = '';
                  for (int i = 0; i < value.length; i++) {
                    hexString += value[i].codeUnitAt(0).toRadixString(16);
                    print(hexString);
                  }
                });
              },
            ),
            TextButton(
              style: TextButton.styleFrom(
                primary: Colors.blue,
              ),
              onPressed: () async {
                String enteredText = _textController.text;
                print(enteredText);
                print(hexString); // 现在能正确获取到值

                final response = await http.get(Uri.parse(
                  "http://10.10.10.254/httpapi.asp?command=wlanConnectApEx:ssid=$ssid:ch=1:auth=$auth:encry=AES:pwd=$hexString:chext=1"
                ));
                if (response.statusCode == 200) {
                  Navigator.pushNamed(context, '/');
                } else {
                  // 处理请求错误
                }
              },
              child: Text("Connect"),
            ),
          ],
        ),
      ),
    );
  }
}

额外优化建议 #

其实不需要维护hexString的状态，你可以在onPressed时直接根据输入文本生成十六进制字符串，这样既避免状态管理的潜在问题，也更高效：

onPressed: () async {
  String enteredText = _textController.text;
  // 直接生成hexString
  String hexString = enteredText.split('').map((char) => char.codeUnitAt(0).toRadixString(16)).join();
  print(hexString);

  final response = await http.get(Uri.parse(
    "http://10.10.10.254/httpapi.asp?command=wlanConnectApEx:ssid=$ssid:ch=1:auth=$auth:encry=AES:pwd=$hexString:chext=1"
  ));
  // ...后续逻辑
}

这种方式不需要依赖setState更新状态，代码更简洁，也避免了状态不同步的问题。

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