如何在 flutter 中剪切定位小部件的角
How to clip the corners of Positioned widget in 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))));
}
}
@Ketan 如果你用`ClipRRect1 小部件包裹 Stack 并为其提供边框半径,那么它将为绿色和灰色区域添加边框。
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,
),
),
),
]),
)),
);
}
}
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: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Stack(children: [
Container(
height: 100.0,
width: width,
color: Colors.grey,
),
Positioned(
left: -(percentage / 100) * width,
top: -(percentage / 100) * width,
child: Container(
height: (percentage / 100) * width * 2,
width: (percentage / 100) * width * 2,
color: color,
),
),
]),
),
),
);
}
}
这是我得到的输出:
我想用灰色 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))));
}
}
@Ketan 如果你用`ClipRRect1 小部件包裹 Stack 并为其提供边框半径,那么它将为绿色和灰色区域添加边框。
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,
),
),
),
]),
)),
);
}
}
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: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Stack(children: [
Container(
height: 100.0,
width: width,
color: Colors.grey,
),
Positioned(
left: -(percentage / 100) * width,
top: -(percentage / 100) * width,
child: Container(
height: (percentage / 100) * width * 2,
width: (percentage / 100) * width * 2,
color: color,
),
),
]),
),
),
);
}
}