Flutter：在 TextFormField 中同时显示 helpText 和 labelText答案

【问题标题】：Flutter: Showing both helpText and labelText in TextFormFieldFlutter：在 TextFormField 中同时显示 helpText 和 labelText
【发布时间】：2019-09-11 16:14:25
【问题描述】：

我正在尝试使用 Flutter 构建登录页面。

我希望为我正在使用的 TextFormField 显示hintText 和 labelText，但是它仅在我单击该字段时（即光标位于该字段中时）显示 labelText。

  TextFormField(
    keyboardType: TextInputType.emailAddress,
    decoration: const InputDecoration(
    hintText: 'example@email.com',
    labelText: 'Username',
    labelStyle: TextStyle(
      color: Colors.blue,
      ),
    ),
  );

最初的样子：

点击后的样子：

【问题讨论】：

标签： flutter

【解决方案1】：

您将autofocus: true 设置为使其在页面呈现后立即聚焦。

  TextFormField(
    autofocus: true,
    keyboardType: TextInputType.emailAddress,
    decoration: const InputDecoration(
    hintText: 'example@email.com',
    labelText: 'Username',
    labelStyle: TextStyle(
      color: Colors.blue,
      ),
    ),
  );

【讨论】：

【解决方案2】：

它没有默认属性，但你可以试试这个。

    return Scaffold(
        body: Center(
            child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                CustomTextFormField(
                    labelText: 'EMAIL',
                    hintText: 'example@email.com',
                    keyboardType: TextInputType.emailAddress,
                    validator: (t) {},
                ),
                SizedBox(height: 8),

                CustomTextFormField(
                    labelText: 'PASSWORD',
                    hintText: 'Enter password',
                    keyboardType: TextInputType.emailAddress,
                    validator: (t) {},
                ),
                SizedBox(height: 8),

                CustomTextFormField(
                    labelText: 'NAME',
                    hintText: 'Enter name',
                    keyboardType: TextInputType.emailAddress,
                    validator: (t) {},
                )
                ],
            ),
            )));

在 CustomTextFormField 类上创建

        import 'package:flutter/material.dart';

        class CustomTextFormField extends StatelessWidget {

            final TextEditingController controller;
            final String hintText;
            final String labelText;
            final TextInputType keyboardType;
            final Function(String) validator;
            final bool obscureText;

            CustomTextFormField({
            this.controller,
            this.hintText,
            this.labelText,
            this.keyboardType, 
            this.validator,     
            this.obscureText: false
            });

        @override
        Widget build(BuildContext context) {

            final theme = Theme.of(context);

            return Theme(
            data: theme.copyWith(
                primaryColor: theme.accentColor, 
                hintColor: Colors.grey[500], 
                errorColor: Colors.redAccent,
            ),
            child: Container(
                width: double.infinity,
                child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                    Text(
                    labelText, 
                    textAlign: TextAlign.start, 
                    style: TextStyle(
                        color: theme.primaryColor, 
                        fontWeight: FontWeight.bold, 
                        fontSize: 15
                    )
                    ),
                    TextFormField(
                    cursorColor: Colors.grey[850],
                    style: TextStyle(color: Colors.grey[850]),
                    controller: controller,
                    decoration: InputDecoration(
                        hintText: hintText,
                        enabledBorder: UnderlineInputBorder(borderSide: BorderSide(color: theme.primaryColor)),
                        focusedBorder: UnderlineInputBorder(borderSide: BorderSide(color: theme.primaryColor)),
                        disabledBorder: UnderlineInputBorder(borderSide: BorderSide(color: theme.primaryColor))
                    ),
                    keyboardType: keyboardType,
                    obscureText: obscureText,
                    validator: validator,
                    ),            
                ],
                ),
            )
            );
        }
        }

【讨论】：