Пользовательский клипер 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Пользовательский клипер Flutter со стеком работает неправильно

Но то, что у меня есть, когда я пробую код, похоже на это Пользовательский клипер Flutter со стеком работает неправильно

И стек не работает ... треугольник должен быть изолирован внутри контейнера, но почему пользовательский клипер может выходить за пределы нижнего контейнера ??

Я действительно запутался, пожалуйста, помогите

Я просто скопировал ваш код и получил imgur.com/oUwhZgT

Ryosuke 20.03.2019 16:55

@Ryosuke Это именно то, что я ожидал ... Это странно .. Какую версию флаттера вы используете?

surya surakhman 20.03.2019 17:04
Flutter 1.3.10-pre.5 • channel master • https://github.com/flutter/flutter.git Framework • revision ddee4f716c (10 days ago) • 2019-03-10 23:22:28 -0400 Engine • revision 0d2cf5857b Tools • Dart 2.2.1 (build 2.2.1-dev.1.0 2fb6cd9f5f)
Ryosuke 20.03.2019 17:05

Странно... Пробую в эмуляторе iOS, работает хорошо.. Спасибо @Ryosuke

surya surakhman 20.03.2019 17:26

@Ryosuke Я ничего не делал....

Ryosuke 20.03.2019 17:27
2
5
1 289
1

Ответы 1

Решено изменением эмулятора с Genymotion на эмулятор iOS IphoneX. Не знаю, почему он показывает разное поведение между iOS и Android, но я думаю, что эмулятор iOS — правильный.

Другие вопросы по теме