[英]How to change OutlinedButton border color?
Flutter 小部件,我尝试使用 BorderSide(颜色:Colors.blue)更改 OutlineButton 边框颜色。 OutlineButton 无论设置哪种颜色都始终带有灰色边框,但宽度变化是适用的。 如何改变OutlineButton的边框线颜色?
class OutlineButtonWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: OutlineButton(
onPressed: null,
borderSide: BorderSide(
width: 5.0,
color: Colors.blue,
style: BorderStyle.solid,
),
child: Text('outline button')
),
),
);
}
}
使用style
属性
OutlinedButton(
onPressed: () {},
child: Text('Outlined button'),
style: OutlinedButton.styleFrom(
side: BorderSide(width: 5.0, color: Colors.blue),
),
)
我收到“OutlineButton”已弃用且不应使用的消息。 请改用 OutlinedButton。 请参阅 flutter.dev/go/material-button-migration-guide 中的迁移指南)。
迁移代码之前:
child: OutlineButton(
onPressed: onPressed,
child: CustomText(
text,
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 14,
color: Colors.black),
),
color: Colors.orange,
borderSide: BorderSide(color: Colors.amber),
),
迁移代码后:
child: OutlinedButton(
onPressed: onPressed,
child: CustomText(
text,
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 14,
color: Colors.black),
),
style: OutlinedButton.styleFrom(backgroundColor: Colors.orange, side: BorderSide(color: Colors.amber)),
),
这是 backgroundColor 和颜色属性的官方参考: https://api.flutter.dev/flutter/material/ButtonStyle/backgroundColor.html
https://api.flutter.dev/flutter/material/MaterialButton/color.html
样式属性将起作用
OutlineButton(
onPressed: (){},
style: OutlinedButton.styleFrom(
side: BorderSide(
width: 5.0,
color: Colors.blue,
style: BorderStyle.solid,
),
),
child: Text('outline button')
),
),
我想避免手动为每个OutlinedButton
设置主题,而是使用主题设置。
您可以使用ThemeData
的outlinedButtonTheme
来做到这一点:
final color = ...;
ThemeData(
...
outlinedButtonTheme: OutlinedButtonThemeData(
style: ButtonStyle(
side: MaterialStateProperty.all(const BorderSide(color: color)),
// surfaceTintColor: MaterialStateProperty.all(Colors.blue),
)),
);
使用样式属性
style: ButtonStyle(
side: MaterialStateProperty.all(BorderSide(
color: Colors.blue,
width: 1.0,
style: BorderStyle.solid)))
或尝试这两个工作
style: OutlinedButton.styleFrom(
side: BorderSide(
width: 5.0,
color: Colors.blue,
style: BorderStyle.solid,
),
),
child: Text('outline button')
)
OutlinedButton(
style: ButtonStyle(
side: MaterialStateProperty.all(BorderSide(
color: Colors.blue,
width: 1.0,
style: BorderStyle.solid))),
onPressed: () {},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Align(
child: Padding(
padding:
const EdgeInsets.symmetric(horizontal: 12.0),
child: Icon(
Icons.clear,
size: 24,
),
),
),
Text("Clear")
],
))
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.