Question

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

我想同时显示我正在使用的TextFormField的hintText和labelText，但是当我单击该字段时，即当光标位于该字段中时，它仅向我显示labelText。

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

最初的外观：

单击后的外观：

Answer 1

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

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

Answer 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,
                    ),            
                ],
                ),
            )
            );
        }
        }

https://octoperf.com/blog/2017/11/30/how-to-use-jmeter-while-controller/

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

2 个答案: