圆边，但在Inkwell自定义边框中为尖角矩形
圆边，但在Inkwell自定义边框中为尖角矩形
提问于 2021-04-23 13:37:18
我试图在Inkwell自定义边框中实现一个很酷的形状，但这似乎是不可能的。我想要实现一个覆盖自定义边框，其中有水平的边，弯曲的外部和尖锐的角落。我附上了一张图片，这是我想要实现的时尚。目前我已经使用了圆角矩形边框，但这只是边框的边角，但我想使边弯曲，边角锐利。
Click here for the image of the Border fashion I want to achieve
{BuildContext context,
IconData icon,
int index,
Function onTapped,
IconData faicon}) {
var provider = Provider.of<AppData>(context);
return Material(
child: InkWell(
customBorder: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0),
),
splashColor: Colors.grey.withOpacity(0.5),
onTap: () {
setState(() {
provider.currentIndex = index;
if (provider.currentIndex == 0) {
Navigator.pushAndRemoveUntil(
context, FadeRoute(page: HomeScreen()), (route) => false);
} else if (provider.currentIndex == 1) {
Navigator.pushAndRemoveUntil(
context, FadeRoute(page: SearchScreen()), (route) => false);
} else if (provider.currentIndex == 2) {
Navigator.pushAndRemoveUntil(context,
FadeRoute(page: AppointmentsScreen()), (route) => false);
} else if (provider.currentIndex == 3) {
Navigator.pushAndRemoveUntil(
context, FadeRoute(page: ProfileScreen()), (route) => false);
}
});
},
child: Ink(
decoration: BoxDecoration(
color: Colors.white,
),
height: 8.0.h,
width: MediaQuery.of(context).size.width / 4,
child: (faicon != null)
? Center(
child: FaIcon(
faicon,
size: 19.0.sp,
color: index == provider.currentIndex
? kAppColorLimeGreen
: Colors.black54,
),
)
: Center(
child: Icon(
icon,
size: 22.0.sp,
color: index == provider.currentIndex
? kAppColorLimeGreen
: Colors.black54,
),
),
),
),
);
}
}回答 1
Stack Overflow用户
发布于 2021-04-26 02:59:12
使用ClipRect小部件裁剪圆形容器小部件。代码如下：
InkWell(
onTap: () {},
child: ClipRect(
child: Align(
heightFactor: 0.7,
alignment: Alignment.center,
child: Container(
height: 100,
width: MediaQuery.of(context).size.width * 0.5,
decoration: BoxDecoration(
shape: BoxShape.circle,
// borderRadius: BorderRadius.circular(100),
color: Colors.blueGrey,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.shopping_bag_rounded,
color: Colors.white,
),
Text(
"Cart",
style: TextStyle(color: Colors.white),
),
],
),
),
),
),
)页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67224513
复制相关文章
相似问题
腾讯云开发者
