Flutter中TextField详解-互传网

效果图：

1、获取文本

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text("222"),
          centerTitle: true,
        ),
        body: const MyHomePage(),
      ),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final TextEditingController _unameController = TextEditingController();
  final TextEditingController _pwdController = TextEditingController();
  String? username;
  String? password;

  final TextEditingController _selectionController =  TextEditingController();

  @override
  void initState() {
    super.initState();
    //获取用户名文本
    _unameController.addListener(() {
      debugPrint("addListener_unameController:---${_unameController.text}");
    });

    //获取密码文本
    _pwdController.addListener(() {
      //_pwdController.text = "666";
      debugPrint("addListener_pwdController:---${_pwdController.text}");
    });

    //设置默认值，并从第三个字符开始选中后面的字符
    _selectionController.text="hello world!";
    _selectionController.selection=TextSelection(
        baseOffset: 2,
        extentOffset: _selectionController.text.length
    );
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(
          autofocus: true,
          decoration: const InputDecoration(
            prefixIcon: Icon(Icons.person),
            labelText: "用户名",
            hintText: "请输入用户名"
          ),
          controller: _unameController,
/*          onChanged: (value){
            debugPrint("onChanged:username---$value");
          },*/
        ),
         TextField(
          decoration:const InputDecoration(
              prefixIcon: Icon(Icons.lock),
              labelText: "密码",
              hintText: "请输入密码"
          ),
          obscureText: true,
          controller: _pwdController,
/*          onChanged: (value){
             debugPrint("onChanged:password---$value");
           },*/
        ),
        TextField(
          controller: _selectionController,
        )
      ],
    );
  }
}

2、焦点的处理
效果图：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text("焦点的处理"),
          centerTitle: true,
        ),
        body: const MyHomePage(),
      ),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  FocusNode focusNode01 = FocusNode();
  FocusNode focusNode02 = FocusNode();
  FocusScopeNode? focusScopeNode;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        children: [
          TextField(
            autofocus: true,
            focusNode: focusNode01,
            decoration: const InputDecoration(
              icon: Icon(Icons.person),
              labelText: "item1",
            ),
          ),
          TextField(
            focusNode: focusNode02,
            decoration: const InputDecoration(
              icon: Icon(Icons.person),
              labelText: "item2",
            ),
          ),
          Builder(builder: (ctx) {
            return Column(
              children: <Widget>[
                ElevatedButton(
                    onPressed: (){
                        focusScopeNode ??= FocusScope.of(context);
                        focusScopeNode?.requestFocus(focusNode02);
                    },
                    child: const Text("移动焦点")
                ),
                ElevatedButton(
                    onPressed: (){
                      //当所有的焦点都失去的时候，键盘会自动隐藏
                      focusNode01.unfocus();
                      focusNode02.unfocus();
                    },
                    child: const Text("隐藏键盘")
                ),
              ],
            );
          })
        ],
      ),
    );
  }
}

3、监听焦点的变化
获得焦点时focusNode.hasFocus值为true，失去焦点时为false。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text("焦点的处理"),
          centerTitle: true,
        ),
        body: const MyHomePage(),
      ),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  //1、创建focusNode
  FocusNode focusNode = FocusNode();

  @override
  void initState() {
    super.initState();
    focusNode.addListener(() {
      //3、监听焦点变化
      print(focusNode.hasFocus);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        children: [
          TextField(
            autofocus: true,
            focusNode: focusNode,//2、focusNode绑定输入框
            decoration: const InputDecoration(
              icon: Icon(Icons.person),
              labelText: "item1",
            ),
          ),
        ],
      ),
    );
  }
}

4、
边框的处理：

TextField(
  decoration: InputDecoration(
    labelText: "请输入用户名",
    prefixIcon: Icon(Icons.person),
    // 未获得焦点下划线设为灰色
    enabledBorder: UnderlineInputBorder(
      borderSide: BorderSide(color: Colors.grey),
    ),
    //获得焦点下划线设为蓝色
    focusedBorder: UnderlineInputBorder(
      borderSide: BorderSide(color: Colors.blue),
    ),
  ),
),

5、更改默认的主题颜色，默认是蓝色。但是现在我想改变为灰色。比如，在不改变主题的时候，属性为label的用户名和密码是蓝色的，现在通过改变主题，让默认颜色改变为灰色。

Padding(
      padding: const EdgeInsets.all(16.0),
      child: Theme(
        data: Theme.of(context).copyWith(
          hintColor: Colors.grey[200],//定义下划线颜色为灰色
          inputDecorationTheme:const InputDecorationTheme(
            //定义label字体样式
            labelStyle: TextStyle(color: Colors.grey),
            //定义提示文本样式
            hintStyle:TextStyle(color: Colors.grey,fontSize: 14)
          )
        ),
        child: Column(
          children: const [
             TextField(
              decoration: InputDecoration(
                  prefixIcon: Icon(Icons.person),
                  labelText: "用户名",
                  hintText: "请输入用户名"
              ),
            ),
             TextField(
              decoration: InputDecoration(
                  prefixIcon: Icon(Icons.lock),
                  labelText: "密码",
                  hintText: "请输入密码",
                  hintStyle: TextStyle(color: Colors.grey, fontSize: 14.0)
              ),
               obscureText: true,
            ),
          ],
        )
      )
    );

6、通过组合的方式，利用Container重新绘画下划线

Container(
            decoration: const BoxDecoration(
              // 下滑线浅灰色，宽度1像素
              border: Border(bottom: BorderSide(color: Colors.grey,width: 1))
            ),
            child: const TextField(
                decoration: InputDecoration(
                    prefixIcon: Icon(Icons.email),
                    labelText: "Email",
                    hintText: "请输入邮箱",
                    //删除原来的下划线
                    border: InputBorder.none
                ),
              ),
        )

Flutter中TextField详解

效果图：

文章评论