[英]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.