flutter - 如何在颤动中剪辑定位小部件的角
问题描述
这是我得到的输出:
我想用灰色 Container 的圆角将绿色的 Positioned 小部件夹在角落上。任何帮助将不胜感激。
我当前的代码:
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,
),
),
),
]),
),
);
}
}
谢谢你。
解决方案
您可以使用 ClipRRect 来实现,检查代码
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});
Widget positionedWidget(double width){
return 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(
color: color,
),
),
),
]
);
}
@override
Widget build(BuildContext context) {
double width = MediaQuery.of(context).size.width;
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Padding(padding: EdgeInsets.all(10), child: ClipRRect(borderRadius: BorderRadius.circular(30),
child: positionedWidget(width))));
}
}
推荐阅读
- git - 有没有办法在不增加任何版本的情况下使用 lerna 推送 git 标签?
- java - 如何在 JMeter 中使用 Java 代码生成一些 HKSTD id ?此 id 将在进一步的 http 请求采样器中使用
- c# - 在没有任何类修改的情况下绑定 object.object.prop
- machine-learning - ValueError:发现样本数量不一致的输入变量:[559, 140]
- vuejs2 - Vue js:模态组件上的道具不断显示typeError
- mysql - SQL 表中的唯一交叉联接
- powershell - Remove-Item 在 Powershell 脚本中不起作用
- wordpress - Wordpress 更新因内部服务器错误而失败
- java - 当 Maven 目标不是阶段/生命周期的一部分时?
- ruby - 如何更改我使用的 Ruby 版本