我试图改变OutlineInputBorder
的边框颜色,但尝试了无数种方法,失败了。
我通过buildDarkTheme()
函数创建了整个主题配置,但我无法将边框颜色更改为黄色
下面是图片和代码:
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
const kBlackHalf = const Color(0xFF212121);
const kBlackLight = const Color(0xFF484848);
const kBlack = const Color(0xFF000000);
const kYellow = const Color(0xFFffd600);
const kYellowLight = const Color(0xFFffff52);
const kYellowDark = const Color(0xFFc7a500);
const kWhite = Colors.white;
ThemeData buildDarkTheme() {
final ThemeData base = ThemeData();
return base.copyWith(
primaryColor: kBlack,
accentColor: kYellow,
scaffoldBackgroundColor: kBlackHalf,
primaryTextTheme: buildTextTheme(base.primaryTextTheme, kWhite),
primaryIconTheme: base.iconTheme.copyWith(color: kWhite),
buttonColor: kYellow,
textTheme: buildTextTheme(base.textTheme, kWhite),
inputDecorationTheme: InputDecorationTheme(
border: OutlineInputBorder(
borderSide: BorderSide(color: kYellow)
),
labelStyle: TextStyle(
color: kYellow,
fontSize: 24.0
),
),
);
}
TextTheme buildTextTheme(TextTheme base, Color color) {
return base.copyWith(
body1: base.headline.copyWith(color: color, fontSize: 16.0),
caption: base.headline.copyWith(color: color),
display1: base.headline.copyWith(color: color),
button: base.headline.copyWith(color: color),
headline: base.headline.copyWith(color: color),
title: base.title.copyWith(color: color),
);
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
theme: buildDarkTheme(),
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(
actions: <Widget>[
new IconButton(
icon: Icon(Icons.ac_unit),
onPressed: () {},
)
],
),
body: new Container(
padding: new EdgeInsets.only(top: 16.0),
child: new ListView(
children: <Widget>[
new InkWell(
onTap: () {},
child: new InputDecorator(
decoration: new InputDecoration(
labelText: 'XP',
border: OutlineInputBorder()
),
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new Text(this.xp),
],
),
),
)
],
),
)
);
}
}
更多参考:
无法更改TextField边框颜色
https://github.com/flutter/flutter/issues/17592
9条答案
按热度按时间ep6jt1vc1#
自7月起,您现在可以使用
enabledBorder
:有关新的装饰器,请参见full documentation
7d7tgy0s2#
这是上述问题的解决方案,如果用户未单击TextField,则使用enabledBorder,如果用户单击TextField,则使用focusedBorder。
mxg2im7a3#
像这样添加hintColor到你的主题中,它应该会改变OutlineInputBorder的颜色。
woobm2wo4#
您只需在InputDecoration中给予“enabledBorder”参数
93ze6v8z5#
这会将按钮的轮廓颜色更改为蓝色
fruv7luv6#
将
TextField
Package 在Theme
小部件中。insrf1ej7#
只需更改ThemeData的hintColor属性,如下所示:
qxgroojn8#
要更改卡的边框颜色,请使用以下代码
iklwldmw9#
最具体和最简单的回答原来的问题:
原色定义OutlineInputBorder小部件的边框颜色。只需使用主题小部件 Package TextField并覆盖主要颜色。