Flutter:当颜色改变时边框消失
Flutter: Borders Disappear When Their Colour Changes
问题:
我遇到了一个我无法解决的有趣问题。当我改变它们的颜色时,容器的边框消失了。
代码:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Color(0xff31353B),
body: Home(),
),
);
}
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: 50.0,
child: GestureDetector(
onTap: () {},
child: Container(
decoration: BoxDecoration(
border: Border(
left: BorderSide(
//TODO: HERE IS THE PROBLEM.
color: Color(0xFFF05A22),
//style: BorderStyle.solid,
width: 3.0,
),
top: BorderSide(
//TODO: HERE IS THE PROBLEM.
color: Color(0xFFF05A22),
style: BorderStyle.solid,
width: 3.0,
),
right: BorderSide(
//TODO: HERE IS THE PROBLEM.
color: Color(0xFFF05A22),
style: BorderStyle.solid,
width: 3.0,
),
bottom: BorderSide(
//TODO: HERE IS THE PROBLEM.
color: Color(0xFFF05A22),
style: BorderStyle.solid,
width: 3.0,
),
),
color: Colors.green,
borderRadius: BorderRadius.circular(30.0),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Center(
child: Text(
"BUTTON",
style: TextStyle(
color: Color(0xFFF05A22),
fontFamily: 'Montserrat',
fontSize: 16,
fontWeight: FontWeight.w600,
letterSpacing: 1,
),
),
),
],
),
),
),
),
],
),
);
}
}
我已经用 //TODO 标记了感兴趣的区域:
我什至无法在它们消失的情况下将它们的颜色更改为白色或黑色。我花了大约一个小时尝试通过互联网搜索自行解决这个问题,但没有成功。
问题:
为什么我可以有一种颜色而不能有另一种颜色?
期望值:
将上边框和左边框更改为黑色,将下边框和右边框更改为白色。
在 flutter 中 "A borderRadius can only be given for uniform borders." 所以如果你删除 radius 它会起作用。但是如果你想保持半径,只用一行是不容易的,这里有一些示例 :
问题:
我遇到了一个我无法解决的有趣问题。当我改变它们的颜色时,容器的边框消失了。
代码:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Color(0xff31353B),
body: Home(),
),
);
}
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: 50.0,
child: GestureDetector(
onTap: () {},
child: Container(
decoration: BoxDecoration(
border: Border(
left: BorderSide(
//TODO: HERE IS THE PROBLEM.
color: Color(0xFFF05A22),
//style: BorderStyle.solid,
width: 3.0,
),
top: BorderSide(
//TODO: HERE IS THE PROBLEM.
color: Color(0xFFF05A22),
style: BorderStyle.solid,
width: 3.0,
),
right: BorderSide(
//TODO: HERE IS THE PROBLEM.
color: Color(0xFFF05A22),
style: BorderStyle.solid,
width: 3.0,
),
bottom: BorderSide(
//TODO: HERE IS THE PROBLEM.
color: Color(0xFFF05A22),
style: BorderStyle.solid,
width: 3.0,
),
),
color: Colors.green,
borderRadius: BorderRadius.circular(30.0),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Center(
child: Text(
"BUTTON",
style: TextStyle(
color: Color(0xFFF05A22),
fontFamily: 'Montserrat',
fontSize: 16,
fontWeight: FontWeight.w600,
letterSpacing: 1,
),
),
),
],
),
),
),
),
],
),
);
}
}
我已经用 //TODO 标记了感兴趣的区域:
我什至无法在它们消失的情况下将它们的颜色更改为白色或黑色。我花了大约一个小时尝试通过互联网搜索自行解决这个问题,但没有成功。
问题:
为什么我可以有一种颜色而不能有另一种颜色?
期望值:
将上边框和左边框更改为黑色,将下边框和右边框更改为白色。
在 flutter 中 "A borderRadius can only be given for uniform borders." 所以如果你删除 radius 它会起作用。但是如果你想保持半径,只用一行是不容易的,这里有一些示例