如何使 TextField 标签在 Flutter 中失去焦点时不会移动

Question

我是 Flutter 新手。

我正在尝试复制以下内容 UI，它有多个 TextField，当我单击其他 TextField 时，它们的所有标签都不会最大化，它们会继续聚焦以显示其中的内容： https://i.stack.imgur.com/8lUeV.png

我做的UI：https://i.stack.imgur.com/o9Rpj.png

我尝试了自动对焦：打开，但它没有用，因为它一次只对一个 TextField 有效。

我的代码：

import 'dart:core';
import 'package:flutter/material.dart';
import 'package:login_sample/models/user.dart';

class EmployeeProfile extends StatefulWidget {
  const EmployeeProfile({Key? key, required this.user}) : super(key: key);

  final User user;

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

class _EmployeeProfileState extends State<EmployeeProfile> {

  late String name = '';
  late String email = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Container(
              decoration: const BoxDecoration(
                  gradient: LinearGradient(
                      begin: Alignment.centerLeft,
                      end: Alignment.bottomCenter,
                      colors: [Colors.blue, Colors.blue])),
              height: MediaQuery.of(context).size.height * 0.3
          ),
          Card(
              elevation: 20.0,
              shape: const RoundedRectangleBorder(
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(50),
                  topRight: Radius.circular(50),
                ),
              ),
              margin: const EdgeInsets.only(left: 0.0, right: 0.0, top: 100.0),
              child: ListView(
                children: <Widget>[
                  SizedBox(
                    child: TextField(
                      autofocus: true,
                      onChanged: (val){
                        name = val;
                      },
                      decoration: InputDecoration(
                        contentPadding: const EdgeInsets.all(10.0),
                        labelText: 'Employee Name',
                        hintText: widget.user.name,
                        labelStyle: const TextStyle(
                          color: Color.fromARGB(255, 107, 106, 144),
                          fontSize: 14,
                          fontWeight: FontWeight.w500,
                        ),
                        border: OutlineInputBorder(
                          borderSide: const BorderSide(color: Color.fromARGB(255, 107, 106, 144), width: 2),
                          borderRadius: BorderRadius.circular(10),
                        ),
                      ),
                    ),
                    width: 150.0,
                  ),
                  SizedBox(
                    child: TextField(
                      autofocus: true,
                      onChanged: (val){
                        email = val;
                      },
                      decoration: InputDecoration(
                        contentPadding: const EdgeInsets.all(10.0),
                        labelText: 'Employee Email',
                        hintText: widget.user.email,
                        labelStyle: const TextStyle(
                          color: Color.fromARGB(255, 107, 106, 144),
                          fontSize: 14,
                          fontWeight: FontWeight.w500,
                        ),
                        border: OutlineInputBorder(
                          borderSide: const BorderSide(color: Color.fromARGB(255, 107, 106, 144), width: 2),
                          borderRadius: BorderRadius.circular(10),
                        ),
                      ),
                    ),
                    width: 150.0,
                  ),
                  TextButton(
                      onPressed: (){
                        print(widget.user.name);
                        print(widget.user.email);
                        setState(() {
                          widget.user.name = name;
                          widget.user.email = email;
                        });
                      },
                      child: const Text('Save'),
                  ),
                ],
              )
          ),
          Positioned(
            top: 0.0,
            left: 0.0,
            right: 0.0,
            child: AppBar(// Add AppBar here only
              backgroundColor: Colors.transparent,
              elevation: 0.0,
              title: Text(
                widget.user.name.toString(),
                style: const TextStyle(
                  letterSpacing: 0.0,
                  fontSize: 20.0,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

P/s: 先生我的英语不太好，无法正确描述它

Answer 1

试试下面的代码希望对你有帮助。在 Padding

中添加你的 ListView()

    Padding(
          padding: EdgeInsets.all(20),
          child: ListView(
            children: <Widget>[
              SizedBox(
                child: TextField(
                  autofocus: true,
                  onChanged: (val) {},
                  decoration: InputDecoration(
                    contentPadding: const EdgeInsets.all(10.0),
                    labelText: 'Employee Name',
                    hintText: 'widget.user.name',
                    labelStyle: const TextStyle(
                      color: Color.fromARGB(255, 107, 106, 144),
                      fontSize: 14,
                      fontWeight: FontWeight.w500,
                    ),
                    border: OutlineInputBorder(
                      borderSide: const BorderSide(
                          color: Color.fromARGB(255, 107, 106, 144),
                          width: 2),
                      borderRadius: BorderRadius.circular(10),
                    ),
                  ),
                ),
                width: 150.0,
              ),
              SizedBox(
                height: 20,
              ),
              SizedBox(
                child: TextField(
                  autofocus: true,
                  onChanged: (val) {},
                  decoration: InputDecoration(
                    contentPadding: const EdgeInsets.all(10.0),
                    labelText: 'Employee Email',
                    hintText: 'widget.user.email',
                    labelStyle: const TextStyle(
                      color: Color.fromARGB(255, 107, 106, 144),
                      fontSize: 14,
                      fontWeight: FontWeight.w500,
                    ),
                    border: OutlineInputBorder(
                      borderSide: const BorderSide(
                          color: Color.fromARGB(255, 107, 106, 144),
                          width: 2),
                      borderRadius: BorderRadius.circular(10),
                    ),
                  ),
                ),
                width: 150.0,
              ),
              TextButton(
                onPressed: () {},
                child: const Text('Save'),
              ),
            ],
          ),
        ),

你的屏幕->

Answer 2

如果您关注 TextField 或 TextField 的内容，标签将可见。如果您的意思是让标签始终可见，您可以在 InputDecoration.

上添加 floatingLabelBehavior: FloatingLabelBehavior.always

import 'dart:core';
import 'package:flutter/material.dart';
import 'package:login_sample/models/user.dart';

class EmployeeProfile extends StatefulWidget {
  const EmployeeProfile({Key? key, required this.user}) : super(key: key);

  final User user;

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

class _EmployeeProfileState extends State<EmployeeProfile> {

  late String name = '';
  late String email = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Container(
              decoration: const BoxDecoration(
                  gradient: LinearGradient(
                      begin: Alignment.centerLeft,
                      end: Alignment.bottomCenter,
                      colors: [Colors.blue, Colors.blue])),
              height: MediaQuery.of(context).size.height * 0.3
          ),
          Card(
              elevation: 20.0,
              shape: const RoundedRectangleBorder(
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(50),
                  topRight: Radius.circular(50),
                ),
              ),
              margin: const EdgeInsets.only(left: 0.0, right: 0.0, top: 100.0),
              child: ListView(
                children: <Widget>[
                  SizedBox(
                    child: TextField(
                      autofocus: true,
                      onChanged: (val){
                        name = val;
                      },
                      decoration: InputDecoration(
                        contentPadding: const EdgeInsets.all(10.0),
                        labelText: 'Employee Name',
                        hintText: widget.user.name,
                        // add here
                        floatingLabelBehavior: FloatingLabelBehavior.always 
                        labelStyle: const TextStyle(
                          color: Color.fromARGB(255, 107, 106, 144),
                          fontSize: 14,
                          fontWeight: FontWeight.w500,
                        ),
                        border: OutlineInputBorder(
                          borderSide: const BorderSide(color: Color.fromARGB(255, 107, 106, 144), width: 2),
                          borderRadius: BorderRadius.circular(10),
                        ),
                      ),
                    ),
                    width: 150.0,
                  ),
                  SizedBox(
                    child: TextField(
                      autofocus: true,
                      onChanged: (val){
                        email = val;
                      },
                      decoration: InputDecoration(
                        contentPadding: const EdgeInsets.all(10.0),
                        labelText: 'Employee Email',
                        hintText: widget.user.email,
                        // add here
                        floatingLabelBehavior: FloatingLabelBehavior.always
                        labelStyle: const TextStyle(
                          color: Color.fromARGB(255, 107, 106, 144),
                          fontSize: 14,
                          fontWeight: FontWeight.w500,
                        ),
                        border: OutlineInputBorder(
                          borderSide: const BorderSide(color: Color.fromARGB(255, 107, 106, 144), width: 2),
                          borderRadius: BorderRadius.circular(10),
                        ),
                      ),
                    ),
                    width: 150.0,
                  ),
                  TextButton(
                      onPressed: (){
                        print(widget.user.name);
                        print(widget.user.email);
                        setState(() {
                          widget.user.name = name;
                          widget.user.email = email;
                        });
                      },
                      child: const Text('Save'),
                  ),
                ],
              )
          ),
          Positioned(
            top: 0.0,
            left: 0.0,
            right: 0.0,
            child: AppBar(// Add AppBar here only
              backgroundColor: Colors.transparent,
              elevation: 0.0,
              title: Text(
                widget.user.name.toString(),
                style: const TextStyle(
                  letterSpacing: 0.0,
                  fontSize: 20.0,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

如何使 TextField 标签在 Flutter 中失去焦点时不会移动

How to make TextField's label wont move when out of focus in Flutter

flutter

flutter-layout