英文:
How to set style for a text field label when the input is active?
问题
下面的图像中，“演示文本”标签默认有点小。我尝试更改labelSmall和labelMedium样式，但对此无效。哪种样式负责此功能？
英文:
On the image below the Demo Text label by default a little bit small. I tried to change labelSmall and labelMedium styles but it doesn't work for that. What style is responsible for that?
答案1
得分: 1
你可以在TextField的InputDecoration中使用floatingLabelStyle。示例： TextField( decoration: InputDecoration( floatingLabelStyle: TextStyle( color: Colors.red, fontSize: 12 ), labelText: 'Demo Text', labelStyle: TextStyle( fontSize: 16 ) ), ),
英文:
You can use floatingLabelStyle in InputDecoration of the TextField
Example:
TextField(
decoration: InputDecoration(
floatingLabelStyle: TextStyle(
color: Colors.red,
fontSize: 12
),
labelText: 'Demo Text',
labelStyle: TextStyle(
fontSize: 16
)
),
),
答案2
得分: 1
你可以使用参数 floatingLabelStyle 在 decoration: 中设置样式。看下面的示例：
TextField(
decoration: InputDecoration(
labelText: '输入您的用户名',
floatingLabelStyle: TextStyle(fontSize: 1)
),
)
查看有关 Flutter TextField 小部件的文档：https://docs.flutter.dev/cookbook/forms/text-input
英文:
You can set the style using the parameter floatingLabelStyle in decoration:. See the example below:
TextField(
decoration: InputDecoration(
labelText: 'Enter your username',
floatingLabelStyle: TextStyle(fontSize: 1)
),
)
Take a look at the Flutter docs about TextField widget here: https://docs.flutter.dev/cookbook/forms/text-input
答案3
得分: 1
以下是代码部分的翻译：
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('演示文本'),
),
);
},
)
请注意，我只翻译了代码部分，不包括其他内容。
英文:
You can try this code:
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'),
),
);
},
)
Here is the screenshot of when the TextField is Empty:
Here is the screenshot of when the TextField is NotEmpty or is active:
And when you make the TextField Empty it changes to your Empty style.
happy coding...
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论