作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
这是我得到的输出:
我想将绿色定位小部件与灰色容器的圆角一起夹在角上。任何帮助将不胜感激。
我当前的代码:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: CustomCard(
title: 'Custom Card', percentage: 50.0, color: Colors.green),
);
}
}
class CustomCard extends StatelessWidget {
final String title;
final double percentage;
final Color color;
CustomCard(
{required this.title, required this.percentage, required this.color});
@override
Widget build(BuildContext context) {
double width = MediaQuery.of(context).size.width;
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Stack(clipBehavior: Clip.antiAliasWithSaveLayer, children: [
Container(
height: 100.0,
width: width,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.grey,
),
),
Positioned(
left: -(percentage / 100) * width,
top: -(percentage / 100) * width,
child: Container(
height: (percentage / 100) * width * 2,
width: (percentage / 100) * width * 2,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(((percentage / 100) * width)),
color: color,
),
),
),
]),
),
);
}
}
谢谢。
最佳答案
@Ketan 如果你用 `ClipRRect1 小部件包裹堆栈并为其提供边框半径,那么它将向绿色和灰色区域添加边框。
class CustomCard extends StatelessWidget {
final String title;
final double percentage;
final Color color;
CustomCard({this.title, this.percentage, this.color});
@override
Widget build(BuildContext context) {
double width = MediaQuery.of(context).size.width;
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Stack(clipBehavior: Clip.antiAliasWithSaveLayer, children: [
Container(
height: 100.0,
width: width,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.grey,
),
),
Positioned(
left: -(percentage / 100) * width,
top: -(percentage / 100) * width,
child: Container(
height: (percentage / 100) * width * 2,
width: (percentage / 100) * width * 2,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(((percentage / 100) * width)),
color: color,
),
),
),
]),
)),
);
}
}
关于flutter - 如何在 flutter 中修剪定位小部件的角,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68449547/
我是一名优秀的程序员,十分优秀!