flutter 当输入处于活动状态时,如何设置文本字段标签的样式?

jucafojl  于 2023-04-22  发布在  Flutter
关注(0)|答案(3)|浏览(134)

在下面的图片Demo Text标签默认有点小.我试图改变labelSmalllabelMedium的风格,但它不工作.什么风格是负责这一点?

xwbd5t1u

xwbd5t1u1#

您可以在TextFieldInputDecoration中使用floatingLabelStyle
示例:

TextField(
      decoration: InputDecoration(
        floatingLabelStyle: TextStyle(
          color: Colors.red,
          fontSize: 12
        ),
        labelText: 'Demo Text',
        labelStyle: TextStyle(
          fontSize: 16
        )
      ),
    ),
fv2wmkja

fv2wmkja2#

您可以使用decoration:中的参数floatingLabelStyle来设置样式。请参见以下示例:

TextField(
    decoration: InputDecoration(
        labelText: 'Enter your username',
        floatingLabelStyle: TextStyle(fontSize: 1)
    ),
)

在这里查看关于TextField小部件的Flutter文档:https://docs.flutter.dev/cookbook/forms/text-input

fhity93d

fhity93d3#

你可以试试这个代码:

var textStyle = const TextStyle(
                        fontSize: 40.0,
                        color: Colors.green,);
                
///
StatefulBuilder(
            builder: (BuildContext context, StateSetter setState) {
              return TextField(
                onChanged: (value) {
                  if (value.isEmpty) {
                    setState(() {
                      textStyle = const TextStyle(
                        fontSize: 40.0,
                        color: Colors.green,
                      );
                    });
                  } else {
                    setState(() {
                      textStyle = const TextStyle(
                        fontSize: 16.0,
                        color: Colors.red,
                      );
                    });
                  }
                },
                decoration: InputDecoration(
                  labelStyle: textStyle,
                    floatingLabelStyle: const TextStyle(
                    fontSize: 16.0,
                    color: Colors.red,
                  ),
                  label: Text('Demo Text'),
         
                ),
              );
            },
          )

以下是TextField为空时的屏幕截图:

以下是TextField为NotEmpty或处于活动状态时的屏幕截图:

当你使TextField为空时,它会变成你的空样式。
快乐编码...

相关问题