Flutter - 更改 OutlineInputBorder 的边框颜色
Posted
技术标签:
【中文标题】Flutter - 更改 OutlineInputBorder 的边框颜色【英文标题】:Flutter - Changing the border color of the OutlineInputBorder 【发布时间】:2018-10-24 08:19:35 【问题描述】:我正在尝试更改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),
],
),
),
)
],
),
)
);
更多参考资料:
Not able to change TextField Border Color
https://github.com/flutter/flutter/issues/17592
【问题讨论】:
作为一个建议,我会如你所愿,但这个边框颜色是基于你的主题原色,它总是黑色的,因为你的原色是黑色。因此,请尝试“OutlineInputBorder”以外的其他小部件。快乐编码! 【参考方案1】:自 7 月起,您现在可以使用 enabledBorder:
new TextField(
decoration: new InputDecoration(
enabledBorder: const OutlineInputBorder(
// width: 0.0 produces a thin "hairline" border
borderSide: const BorderSide(color: Colors.grey, width: 0.0),
),
border: const OutlineInputBorder(),
labelStyle: new TextStyle(color: Colors.green),
...
),
)
查看full documentation 了解新的装饰器
【讨论】:
是的,这是可行的,仅设置边框不适用于颜色,也不适用于边框大小,但实际上将其更改为圆形边框!让我困惑的奇怪行为! 这个解决方案对我不起作用。我正在使用 Flutter 2.5 版本。非常感谢。【参考方案2】:像这样将 hintColor 添加到您的主题中,它应该会更改 OutlineInputBorder 颜色。
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,
hintColor: YOUR_COLOR,
textTheme: buildTextTheme(base.textTheme, kWhite),
inputDecorationTheme: InputDecorationTheme(
border: OutlineInputBorder(),
labelStyle: TextStyle(
color: kYellow,
fontSize: 24.0
),
),
);
【讨论】:
【参考方案3】:这是上述问题的解决方案,如果用户未单击 TextField,则使用 enabledBorder;如果用户单击 TextField,则使用 focusBorder。
enabledBorder: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(25.0),
borderSide: BorderSide(color: Colors.pinkAccent ),
),
focusedBorder: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(25.0),
borderSide: BorderSide(color: Colors.pinkAccent ),
),
【讨论】:
非常感谢亲爱的,工作就像魅力一样,救了我的命 :)【参考方案4】:这会将按钮的轮廓颜色更改为蓝色
new OutlineButton(
borderSide: BorderSide(color: Colors.blue),
)
【讨论】:
这不起作用并且从未起作用。为什么还要建议呢?你测试过吗? github.com/flutter/flutter/issues/18751【参考方案5】:您只需在 InputDecoration 中提供“enabledBorder”参数
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.yellow),
),
【讨论】:
【参考方案6】:将您的TextField
包装在Theme
小部件中。
Theme(
data: Theme.of(context).copyWith(accentColor: Colors.white), // set color here
child: TextField(),
)
【讨论】:
【参考方案7】:只需更改 ThemeData 的 hintColor 属性,如下所示:
Theme(
data: ThemeData(
primaryColor: kYellowDark,
hintColor: kYellow,
),
child: Material(....),
);
【讨论】:
【参考方案8】:要更改卡片的边框颜色,请使用以下代码
new Card(
shape: const RoundedRectangleBorder(
side: BorderSide(color: Colors.blue),
borderRadius: BorderRadius.all(Radius.circular(15.0)),
),
child: Container(new Text("Text in a card"))
【讨论】:
【参考方案9】:对原始问题的最具体和最简单的答案:
Theme(
data: Theme.of(context).copyWith(primaryColor: Colors.blue),
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(), labelText: 'Some Label'),
),
),
原色定义 OutlineInputBorder 小部件的边框颜色。只需使用 Theme 小部件包装您的 TextField 并覆盖原色。
【讨论】:
以上是关于Flutter - 更改 OutlineInputBorder 的边框颜色的主要内容,如果未能解决你的问题,请参考以下文章