[英]How to add a colored bottom border on a rounded corner Container in flutter?
我正在嘗試創建一個帶有彩色底部邊框(一側)的圓角容器。
我嘗試對它們應用邊框半徑和 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
))
)...
我收到此錯誤消息:只能為統一邊界提供邊界半徑。 這就是我想要實現的目標
我認為您需要像這樣使用 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
)
)
)
)
)
Output 供參考:
將 InkWell 小部件與 BoxDecoration 一起使用
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: Container(
padding: EdgeInsets.only(
top: 18.0,
),
margin: EdgeInsets.only(top: 13.0, right: 8.0),
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(16.0),
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.black26,
blurRadius: 0.0,
offset: Offset(0.0, 0.0),
),
]),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
SizedBox(
height: 20.0,
),
Center(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: new Text("Your Text",
style: TextStyle(fontSize: 30.0, color: Colors.black)),
)),
SizedBox(height: 24.0),
InkWell(
child: Container(
padding: EdgeInsets.only(top: 4.0, bottom: 4.0),
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(16.0),
bottomRight: Radius.circular(16.0)),
),
),
onTap: () {
Navigator.pop(context);
},
)
],
),
),
)),
);
}
}
邊框底部只有border-radius才能用ClipPath實現
導入“包:顫振/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)),
)),
),
),
),
),
);
}
}
以防其他人需要添加具有不同顏色邊的圓形框。
由於2017 年的 flutter 問題而創建了一個 package,它實現了一種方法: https://pub.dev/packages/custom_rounded_rectangle_border
查看自述文件以獲取使用說明。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.