我正在尝试创建带有彩色底边框(一侧)的圆角容器。
我尝试对它们应用边框半径和borderSide颜色,但似乎出现错误,并且小部件无法渲染。
Container(
margin: EdgeInsets.only(
top:15.0
),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(3)
),
border: Border(
bottom: BorderSide(color: Color.fromRGBO(0, 83, 79, 1),
width: 3.0
))
)...
我收到此错误消息:边界半径只能用于统一边界。This is what I'm trying to achieve
答案 0 :(得分:1)
我认为您需要像这样使用ClipPath:
ClipPath(
clipper: ShapeBorderClipper(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10))
)
),
child: Container(
height: 70.0,
width: 200.0,
decoration: BoxDecoration(
color: Colors.orange,
border: Border(
bottom: BorderSide(
color: Color.fromRGBO(0, 83, 79, 1),
width: 7.0
)
)
)
)
)
供参考的输出
答案 1 :(得分:0)
在BoxDecoration中使用InkWell小部件
A B C D E F G H
1 Search Criteria: Prod.D
2 Column: 4
3 Prod.A Prod.B Prod.C Prod.D Prod.E
4
5
答案 2 :(得分:0)
使用 ClipPath 可以实现仅带边框半径的边框底部
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: Padding(
padding: EdgeInsets.all(18.0),
child: ClipPath(
clipper: ShapeBorderClipper(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10)))),
child: Container(
height: 70.0,
width: 200.0,
decoration: BoxDecoration(
color: Colors.blueAccent,
border: Border(
bottom: BorderSide(
color: Color.fromRGBO(0, 83, 79, 1), width: 7.0),
),
),
child: Center(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: new Text("Your Text",
style: TextStyle(fontSize: 30.0, color: Colors.black)),
)),
),
),
),
),
);
}
}