颤动的自定义限幅器堆栈无法正常工作

问题描述 投票:0回答:1

我对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 = 0y = 0的偏移应该指向页面的left-top角落。所以如果像这样创造

path.lineTo(size.width / 2, size.height);
path.lineTo(size.width,  0);

路径应该从left-topmiddle-downright-top并回到left-top expected result

但是当我尝试代码时我得到的就像这个current issue

并且,堆栈不工作..三角形应该隔离在容器内,但为什么自定义限幅器可以超过底部容器?

我真的很困惑,请帮忙

dart flutter flutter-layout
1个回答
0
投票

通过将模拟器从Genymotion更改为iOS Iphone模拟器来解决。不知道为什么它在iOS和Android之间表现出不同的行为,但我认为iOS模拟器是正确的..

© www.soinside.com 2019 - 2024. All rights reserved.