在Flutter中，我试图基于文本控制器动态更新列小部件我该怎么做？

问题描述

我要实现的目标是仅在文本控制器未经验证的情况下显示一条消息，否则显示一个空容器。如何根据文本控制器输出的内容重新绘制窗口小部件？

想要的行为：

• 当用户单击登录按钮时，Flutter会检查用户名字段是否为空。
• 如果为空，则在登录按钮下方显示消息。
• 当用户再次单击文本字段并输入一个字符时，该消息消失并返回一个空容器。

代码：

import 'package:Flutter/material.dart';

final Color darkBlue = Color.fromARGB(255,18,32,47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),debugShowCheckedModeBanner: false,home: Scaffold(
        body: Center(
          child: TextFieldExample(),),);
  }
}

class TextFieldExample extends StatefulWidget {
  @override
  _TextFieldExampleState createState() => _TextFieldExampleState();
}

class _TextFieldExampleState extends State<TextFieldExample> {
  @override
  void initState() {
    super.initState();
    _username.addListener(() {
      setState(() {});
    });
  }

  final _username = TextEditingController();
  bool hasMessage = false;
  String email = '';
  String validatorMessage;

  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.symmetric(vertical: 5),padding: EdgeInsets.symmetric(horizontal: 15),decoration: Boxdecoration(borderRadius: BorderRadius.circular(29)),child: Column(children: <Widget>[
        TextField(
          controller: _username,decoration:
              Inputdecoration(icon: Icon(Icons.person),hintText: "Email"),Container(
            margin: EdgeInsets.symmetric(vertical: 5),child: ClipRRect(
                borderRadius: BorderRadius.circular(29),child: RaisedButton(
                    padding: EdgeInsets.symmetric(vertical: 10),onpressed: () async {
                      if (_username.text.isNotEmpty) {
                        //do sign in
                      } else {
                        hasMessage = true;
                        validatorMessage = 'Check username or password';
                      }
                    },child: Text("Login")))),//Change something here,in order to dynamically check and update
        if (hasMessage == false)
          Container()
        else
          Container(
              alignment: Alignment.center,child:
                  Text(validatorMessage,style: TextStyle(color: Colors.red))),]),);
  }
}


 

解决方法

要动态更改显示需要使用StreamBuilder的文本的小部件，它会为每个新事件重新构建：

String validatorMessage;
bool validate = false;     //will be true if the user clicked in the login button
final _usernameController = StreamController<String>(); //stream to validate the text

Widget build(BuildContext context) {
  return Scaffold(
    body: Container(
      margin: EdgeInsets.symmetric(vertical: 5),padding: EdgeInsets.symmetric(horizontal: 15),decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(29),),child: Column(
        mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[
          TextField(
            onChanged: _usernameController.add,//everytime the text changes a new value will be added to the stream
            decoration: InputDecoration(
              icon: Icon(Icons.person),hintText: "Email",Container(
            margin: EdgeInsets.symmetric(vertical: 5),child: ClipRRect(
              borderRadius: BorderRadius.circular(29),child: RaisedButton(
                padding: EdgeInsets.symmetric(vertical: 10),onPressed: () {
                  setState(() {
                    validate = true; 
                  });
                },child: Text("Login"),StreamBuilder<String>(
            initialData: '',stream: _usernameController.stream,builder: (context,snapshot) {
              if (snapshot.data.isEmpty && validate == true) { //checking the stream and if the user clicked in the button
                return Container(
                  alignment: Alignment.center,child: Text(
                    'Check your e-mail and password.',style: TextStyle(
                      color: Colors.red,);
              } else {
                return Container();
              }
            },],);
}

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