[英]Flutter - How to change TextField hint color?
我有点困惑如何更改文本字段的提示颜色。 有人可以指导我怎么做。谢谢
child: TextField(
style: TextStyle(fontSize: 20),
decoration: InputDecoration(
hintText: "Password",
border: new OutlineInputBorder(
borderSide: new BorderSide(
color: Colors.teal,
),
),
prefixIcon: const Icon(
Icons.security,
color: Colors.white,
),
),
),
您可以使用hintStyle
:在InputDecoration
TextField(
style: TextStyle(fontSize: 20),
decoration: InputDecoration(
hintText: "Password",
hintStyle: TextStyle(fontSize: 20.0, color: Colors.redAccent),
border: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.teal,
),
),
prefixIcon: const Icon(
Icons.security,
color: Colors.white,
),
),
),
作为已接受答案的补充,要更新重点提示装饰,您必须更新应用程序的主题。
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primaryColor: Colors.white,
inputDecorationTheme: const InputDecorationTheme(
labelStyle: TextStyle(color: Colors.black),
hintStyle: TextStyle(color: Colors.grey),
)),
home: MainScreen(),
);
}
更改hintStyle 和labelStyle
TextFormField(
decoration: InputDecoration(
hintText: 'username@mail.com',
labelText: 'Email',
hintStyle: TextStyle(color: Colors.white), # change to your color
labelStyle: TextStyle(color: Colors.white), # change color
))
在挖掘了用于确定标签颜色的 InputDecorator 的源代码后,这是我发现的。
TextStyle _getFloatingLabelStyle(ThemeData themeData) {
final Color color = decoration.errorText != null
? decoration.errorStyle?.color ?? themeData.errorColor
: _getActiveColor(themeData);
final TextStyle style = themeData.textTheme.subtitle1.merge(widget.baseStyle);
return style
.copyWith(color: decoration.enabled ? color : themeData.disabledColor)
.merge(decoration.labelStyle);
}
Color _getActiveColor(ThemeData themeData) {
if (isFocused) {
switch (themeData.brightness) {
case Brightness.dark:
return themeData.accentColor;
case Brightness.light:
return themeData.primaryColor;
}
}
return themeData.hintColor;
}
简而言之,要更改提示颜色,请使用 Theme 和 ThemeData 设置hintColor。
另一个提示:要更改标签颜色,请设置primaryColor 浅色主题,或设置深色主题的accentColor。
ThemeData.dark().copyWith(
primaryColor: Colors.red,
accentColor: Colors.white,
hintColor: Colors.pink,
)
TextField(
decoration: InputDecoration(
hintText: 'your hint',
hintStyle: Theme.of(context).textTheme.caption.copyWith(
fontSize: 20,
fontWeight: FontWeight.w600,
color: ColorConstants.kTextColor, <--- // Set Your Own Color
),
如果您想更改应用程序中所有 TextField Widget 的hintColor,您可以在主题中应用它。
示例代码:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData.light().copyWith(
hintColor: Colors.orange,
),
home: Scaffold(
body: Column(children: [
TextField(
decoration: InputDecoration(
hintText: "Email",
),
),
TextField(
decoration: InputDecoration(
hintText: "Password",
),
),
]),
),
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.