【自学Flutter】6.3 获取输入框的值(方法2)

最新推荐文章于 2025-03-19 20:00:00 发布

原创最新推荐文章于 2025-03-19 20:00:00 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Android #Flutter

自学Flutter 专栏收录该内容

64 篇文章

订阅专栏

本文介绍了一种在Flutter中获取输入框值的方法，通过使用TextEditingController来保存和读取TextField的输入值，提供了完整的源代码示例和运行效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

6.3 获取输入框的值(方法2)

1.源代码

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  TextEditingController textEditingController = new TextEditingController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  TextField(
                    autofocus: true,
                    decoration: InputDecoration(
                      prefixIcon:Icon(Icons.perm_identity),
                      labelText: "用户名",
                      hintText: "请输入用户名",
                      hintStyle: TextStyle(
                        color: Colors.grey,
                      ),
                    ),
                    controller: textEditingController,
                  ),
                  TextField(
                    obscureText: true,
                    decoration: InputDecoration(
                      prefixIcon:Icon(Icons.lock),
                      labelText: "密码",
                      hintText: "请输入密码",
                      hintStyle: TextStyle(
                        color: Colors.grey,
                      ),
                    ),
                  ),
                  Builder(
                      builder: (context)=>RaisedButton(
                        onPressed: (){
                          Scaffold.of(context).showSnackBar(new SnackBar(content:new Text(textEditingController.text)));
                        },
                        child: Text("点击显示输入框的值"),
                      )
                  )
                ],
              ),
            )
        )
    );
  }
}

2.解释源代码

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  //声明一个TextEditingController保存输入框的值
  TextEditingController textEditingController = new TextEditingController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  TextField(
                    autofocus: true,
                    decoration: InputDecoration(
                      prefixIcon:Icon(Icons.perm_identity),
                      labelText: "用户名",
                      hintText: "请输入用户名",
                      hintStyle: TextStyle(
                        color: Colors.grey,
                      ),
                    ),
                    //使用controller保存输入框的值
                    controller: textEditingController,
                  ),
                  TextField(
                    obscureText: true,
                    decoration: InputDecoration(
                      prefixIcon:Icon(Icons.lock),
                      labelText: "密码",
                      hintText: "请输入密码",
                      hintStyle: TextStyle(
                        color: Colors.grey,
                      ),
                    ),
                  ),
                  Builder(
                      builder: (context)=>RaisedButton(
                        onPressed: (){
                          //使用controller获取输入框的值
                          Scaffold.of(context).showSnackBar(new SnackBar(content:new Text(textEditingController.text)));
                        },
                        child: Text("点击显示输入框的值"),
                      )
                  )
                ],
              ),
            )
        )
    );
  }
}

3.效果图

效果图