我对flutter非常感兴趣,目前我正在尝试使用clipPart小部件创建自定义限幅器。但它似乎无法正常工作。
这是我的代码
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
title: "My App",
home: HomePage(),
debugShowCheckedModeBanner: false,
));
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: <Widget>[
Container(
alignment: Alignment.topCenter,
color: Colors.teal,
child: HomeScreenTop(),
)
],
),
);
}
}
class HomeScreenTop extends StatefulWidget {
@override
_HomeScreenTopState createState() => _HomeScreenTopState();
}
class _HomeScreenTopState extends State<HomeScreenTop> {
@override
Widget build(BuildContext context) {
return Stack(
textDirection: TextDirection.ltr,
children: <Widget>[
Align(
alignment: Alignment.topCenter,
child: WaveContainer(),
),
],
);
}
}
class WaveContainer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ClipPath(
clipper: CustomShapeClipper(),
clipBehavior: Clip.antiAlias,
child: Container(
width: MediaQuery.of(context).size.width,
height: 400.0,
color: Colors.orange,
),
);
}
}
class CustomShapeClipper extends CustomClipper<Path> {
@override
getClip(Size size) {
print(size.height);
final Path path =Path();
path.lineTo(size.width / 2, size.height);
path.lineTo(size.width, 0);
path.close();
return path;
}
@override
bool shouldReclip(CustomClipper oldClipper) => true;
}
我想要做的是,从上到下创建一个三角形,正如我在教程中所知,x = 0
和y = 0
的偏移应该指向页面的left-top
角落。所以如果像这样创造
path.lineTo(size.width / 2, size.height);
path.lineTo(size.width, 0);
路径应该从left-top
到middle-down
到right-top
并回到left-top
并且,堆栈不工作..三角形应该隔离在容器内,但为什么自定义限幅器可以超过底部容器?
我真的很困惑,请帮忙
通过将模拟器从Genymotion更改为iOS Iphone模拟器来解决。不知道为什么它在iOS和Android之间表现出不同的行为,但我认为iOS模拟器是正确的..