如何在颤动中更改输入文本颜色 - Dart

在编写Dart程序时，可能会有一些需要在用户输入时改变文本颜色的场景，比如密码强度检查等。在这种情况下，我们可以使用Flutter中的TextEditingController，结合StreamBuilder，来实现一个很好的输入框颜色动态变化效果。下面是一个实现的例子。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dynamic Input Color',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ColorInput(),
    );
  }
}

class ColorInput extends StatefulWidget {
  @override
  _ColorInputState createState() => _ColorInputState();
}

class _ColorInputState extends State<ColorInput> {
  TextEditingController _controller;
  StreamController<String> _streamController = StreamController<String>();
  Stream<String> _stream;
  String _password;

  @override
  void initState() {
    super.initState();
    _controller = TextEditingController();
    _stream = _streamController.stream;
    _stream.listen((password) {
      setState(() {
        _password = password;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dynamic Input Color'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextField(
              controller: _controller,
              obscureText: true,
              onChanged: (password) {
                _streamController.add(password);
              },
              decoration: InputDecoration(
                hintText: 'Enter a password',
                hintStyle: TextStyle(
                  color: Colors.grey,
                ),
              ),
            ),
            SizedBox(height: 20),
            Text(
              'Password strength: ',
              style: TextStyle(
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(height: 10),
            _password == null
                ? Container()
                : Container(
                    width: 100,
                    height: 10,
                    decoration: BoxDecoration(
                      color: _getPasswordColor(),
                      borderRadius: BorderRadius.circular(5),
                    ),
                  ),
          ],
        ),
      ),
    );
  }

  Color _getPasswordColor() {
    if (_password.length <= 4) {
      return Colors.red;
    } else if (_password.length <= 8) {
      return Colors.orange;
    } else {
      return Colors.green;
    }
  }

  @override
  void dispose() {
    _controller.dispose();
    _streamController.close();
    super.dispose();
  }
}

解释

我们首先定义了一个ColorInput StatefulWidget，里面嵌套了一个TextField和一个StreamBuilder。StreamBuilder用于接收输入框的输入流并产生动态效果，而TextField将用户的输入作为流发送给StreamBuilder。

StreamBuilder从输入流中获取当前密码并确定其颜色，然后将结果传递给Text widget以在界面上显示密码强度颜色条。为了确保这两个小部件之间的顺畅通信，我们还使用了一个StreamController。

最后，在ColorInputState中我们实现了一个_getPasswordColor方法，这个方法基于当前输入的密码长度来决定密码强度颜色。

下图是该程序的示例截图：