[英]Not able to change TextField Border Color
我正在嘗試使用BorderSide
更改我的TextField
邊框的顏色,但它不起作用。
這是我下面的代碼。
new TextField(
decoration: new InputDecoration(
border: new OutlineInputBorder(
borderSide: new BorderSide(color: Colors.teal)
),
hintText: 'Tell us about yourself',
helperText: 'Keep it short, this is just a demo.',
labelText: 'Life story',
prefixIcon: const Icon(Icons.person, color: Colors.green,),
prefixText: ' ',
suffixText: 'USD',
suffixStyle: const TextStyle(color: Colors.green)),
)
)
結果截圖如下所示。
這樣做的新方法是使用enabledBorder
像這樣:
new TextField(
decoration: new InputDecoration(
enabledBorder: const OutlineInputBorder(
borderSide: const BorderSide(color: Colors.grey, width: 0.0),
),
focusedBorder: ...
border: ...
),
)
由於設置到屏幕的默認主題,這不會改變。
因此,只需通過用new ThemeData()包裝 TextField 來為您正在繪制的小部件更改它們
child: new Theme(
data: new ThemeData(
primaryColor: Colors.redAccent,
primaryColorDark: Colors.red,
),
child: new TextField(
decoration: new InputDecoration(
border: new OutlineInputBorder(
borderSide: new BorderSide(color: Colors.teal)),
hintText: 'Tell us about yourself',
helperText: 'Keep it short, this is just a demo.',
labelText: 'Life story',
prefixIcon: const Icon(
Icons.person,
color: Colors.green,
),
prefixText: ' ',
suffixText: 'USD',
suffixStyle: const TextStyle(color: Colors.green)),
),
));
好吧,我真的不知道為什么分配給邊框的顏色不起作用。 但是您可以使用文本字段的其他邊框屬性來控制邊框顏色。 他們是:
下面給出了一個代碼片段:
TextField(
enabled: false, // to trigger disabledBorder
decoration: InputDecoration(
filled: true,
fillColor: Color(0xFFF2F2F2),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(width: 1,color: Colors.red),
),
disabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(width: 1,color: Colors.orange),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(width: 1,color: Colors.green),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(width: 1,)
),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(width: 1,color: Colors.black)
),
focusedErrorBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(width: 1,color: Colors.yellowAccent)
),
hintText: "HintText",
hintStyle: TextStyle(fontSize: 16,color: Color(0xFFB3B1B1)),
errorText: snapshot.error,
),
controller: _passwordController,
onChanged: _authenticationFormBloc.onPasswordChanged,
obscureText: false,
),
希望對你有幫助。
更改primaryColor
和primaryColorDark
顏色的代碼不會更改邊框的顏色,只有在點擊顏色后才保持黑色
必須改變的屬性是hintColor
BorderSide
不應該用於此,您需要更改 Theme。
要使紅色默認將主題放在MaterialApp(theme: ...)
並更改特定小部件的主題,例如將默認紅色更改為小部件的黃色,圍繞小部件:
new Theme(
data: new ThemeData(
hintColor: Colors.yellow
),
child: ...
)
下面是代碼和gif:
請注意,如果我們將primaryColor
顏色定義為黑色,則通過點擊小部件,它會被選擇為黑色
但是要更改小部件內部的標簽和文本,我們需要將主題設置為InputDecorationTheme
以黃色開頭的小部件具有自己的主題,以紅色開頭的小部件具有使用函數buildTheme()
定義的默認主題
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
ThemeData buildTheme() {
final ThemeData base = ThemeData();
return base.copyWith(
hintColor: Colors.red,
primaryColor: Colors.black,
inputDecorationTheme: InputDecorationTheme(
hintStyle: TextStyle(
color: Colors.blue,
),
labelStyle: TextStyle(
color: Colors.green,
),
),
);
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
theme: buildTheme(),
home: new HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => new _HomePageState();
}
class _HomePageState extends State<HomePage> {
String xp = '0';
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(),
body: new Container(
padding: new EdgeInsets.only(top: 16.0),
child: new ListView(
children: <Widget>[
new InkWell(
onTap: () {},
child: new Theme(
data: new ThemeData(
hintColor: Colors.yellow
),
child: new TextField(
decoration: new InputDecoration(
border: new OutlineInputBorder(),
hintText: 'Tell us about yourself',
helperText: 'Keep it short, this is just a demo.',
labelText: 'Life story',
prefixIcon: const Icon(Icons.person, color: Colors.green,),
prefixText: ' ',
suffixText: 'USD',
suffixStyle: const TextStyle(color: Colors.green)),
)
)
),
new InkWell(
onTap: () {},
child: new TextField(
decoration: new InputDecoration(
border: new OutlineInputBorder(
borderSide: new BorderSide(color: Colors.teal)
),
hintText: 'Tell us about yourself',
helperText: 'Keep it short, this is just a demo.',
labelText: 'Life story',
prefixIcon: const Icon(Icons.person, color: Colors.green,),
prefixText: ' ',
suffixText: 'USD',
suffixStyle: const TextStyle(color: Colors.green)),
)
)
],
),
)
);
}
}
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
borderSide: BorderSide(color: Colors.red)
),
最好和最有效的解決方案是在你的主類中添加主題並添加這樣的輸入裝飾。
theme: ThemeData(
inputDecorationTheme: InputDecorationTheme(
border: OutlineInputBorder(
borderSide: BorderSide(color: Colors.pink)
)
),
)
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(4.0)),
borderSide: BorderSide(width: 1.0),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.blueGrey),
),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.redAccent),
),
focusedErrorBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.orangeAccent),
),
disabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
contentPadding: EdgeInsets.all(10.0),
hintText: 'Tell us about yourself',
helperText: 'Keep it short, this is just a demo.',
labelText: 'Life story',
prefixIcon: const Icon(
Icons.person,
color: Colors.green,
),
prefixText: ' ',
suffixText: 'USD',
suffixStyle: const TextStyle(color: Colors.green),
),
),
在你的 lib 文件中
創建一個名為colors
的文件夾。
在colors
文件夾中創建一個 dart 文件並將其命名為color
。
將此代碼粘貼在其中
const MaterialColor primaryOrange = MaterialColor( _orangePrimaryValue, <int, Color>{ 50: Color(0xFFFF9480), 100: Color(0xFFFF9480), 200: Color(0xFFFF9480), 300: Color(0xFFFF9480), 400: Color(0xFFFF9480), 500: Color(0xFFFF9480), 600: Color(0xFFFF9480), 700: Color(0xFFFF9480), 800: Color(0xFFFF9480), 900: Color(0xFFFF9480), }, ); const int _orangePrimaryValue = 0xFFFF9480;
轉到您的main.dart
文件並將此代碼放在您的主題中
theme:ThemeData( primarySwatch: primaryOrange, ),
像這樣import 'colors/colors.dart'
在main.dart
導入color
文件夾;
我們已嘗試使用粘貼的代碼段自定義搜索框。 這段代碼對 Flutter 中的所有TextFiled
裝飾都很有用。 希望這個片段對其他人有幫助。
Container(
margin: EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),
child: new Theme(
data: new ThemeData(
hintColor: Colors.white,
primaryColor: Colors.white,
primaryColorDark: Colors.white,
),
child:Padding(
padding: EdgeInsets.all(10.0),
child: TextField(
style: TextStyle(color: Colors.white),
onChanged: (value) {
filterSearchResults(value);
},
controller: editingController,
decoration: InputDecoration(
labelText: "Search",
hintText: "Search",
prefixIcon: Icon(Icons.search,color: Colors.white,),
enabled: true,
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.white),
borderRadius: BorderRadius.all(Radius.circular(25.0))),
border: OutlineInputBorder(
borderSide: const BorderSide(color: Colors.white, width: 0.0),
borderRadius: BorderRadius.all(Radius.circular(25.0)))),
),
),
),
),
您可以將此代碼用於底部工作表以及普通文本字段:
class TextFieldForDropDown extends StatelessWidget {
final String title;
final String hintText;
final TextEditingController textEditingController;
bool isPassword;
final Function onTap;
final bool enable;
TextFieldForDropDown({this.title, this.hintText, this.textEditingController, this.isPassword = false, this.onTap, this.enable});
@override
Widget build(BuildContext context) {
var titleTextStyle = TextStyle(
color: Color(0xff9098C8),
fontSize: 12,
fontWeight: FontWeight.w400,
fontFamily: "Muli",
);
var textFieldTextStyle = TextStyle(
color: Colors.white,
fontSize: 14,
fontWeight: FontWeight.w400,
fontFamily: "Muli",
);
var borderSides = OutlineInputBorder(borderSide: new BorderSide(color: Color(0xff38406B)));
var borderSides1 = OutlineInputBorder(borderSide: new BorderSide(color: Color(0xffdae4ff)));
return InkWell(
onTap: onTap,
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(this.title, style: titleTextStyle),
SizedBox(height: 8),
TextFormField(
enabled: enable,
// onTap: onTap,
obscureText: isPassword,
style: textFieldTextStyle,
decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(horizontal: 8, vertical: 8),
hintText: this.hintText,
hintStyle: titleTextStyle,
border: textEditingController.text != "" ? borderSides1 :borderSides,
enabledBorder: textEditingController.text != "" ? borderSides1 :borderSides,
disabledBorder: textEditingController.text != "" ? borderSides1 :borderSides,
focusedBorder: OutlineInputBorder(borderSide: new BorderSide(color: Color(0xffdae4ff))),
),
controller: textEditingController,
)
],
),
),
);
}
}
並像這樣使用:
TextFieldForDropDown(
title: 'Phone Number*',
hintText: '+123-22-223-00',
textEditingController: viewModel.phoneController,
),
Padding(
padding: EdgeInsets.symmetric(vertical: 10, horizontal: 40),
child: TextField(
cursorColor: Color.fromRGBO(25, 118, 218, 1),
decoration: new InputDecoration(
border: new OutlineInputBorder(
borderSide:
new BorderSide(color: Color.fromRGBO(25, 118, 218, 1)),
),
focusedBorder: new OutlineInputBorder(
borderSide:
new BorderSide(color: Color.fromRGBO(25, 118, 218, 1)),
),
labelText: "Edit Phone",
labelStyle: TextStyle(
color: Colors.grey,
),
prefixIcon: const Icon(
Icons.phone_outlined,
color: Color.fromRGBO(25, 118, 218, 1),
),
),
),
),
晚點再謝我 :)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.