在应用程序栏上颤动剪辑路径答案

【问题标题】：Flutter clippath over appbar在应用程序栏上颤动剪辑路径
【发布时间】：2020-11-06 02:13:12
【问题描述】：

您好，我的剪辑路径有问题，我正在尝试像插入的图像链接 [https://imgur.com/qDspPgV] 中那样做一个剪辑路径。但是，我意识到我实际上不能在颤振中做到这一点，因为 appbar 挡住了路，所以它给了我一个空白。

有什么方法可以重叠吗？

这是我的代码

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  SystemChrome.setSystemUIOverlayStyle(
      SystemUiOverlayStyle(statusBarColor: Colors.transparent));
  runApp(LoginUI());
}

class LoginUI extends StatefulWidget {
  @override
  _LoginUIState createState() => _LoginUIState();
}

class _LoginUIState extends State<LoginUI> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: Text("Login"),
      ),
      body: SafeArea(child: Builder(builder: (BuildContext context) {
        return Container(
            color: Colors.white,
            child: ClipPath(
                clipper: MyClipper(),
                child: Container(
                  color: Colors.red,
                )));
      })),
    ));
  }
}

class MyClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = new Path();
    path.lineTo(0, size.height * .5);
    path.lineTo(size.width, 0);
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return true;
  }
}

这是我的设计输出，因为 appbar [https://imgur.com/UaKFvBO] 设计上的剪贴路径是一个占位符。在我真正设法重叠应用栏之前，我还没有决定更改它。

编辑：在没有应用栏的情况下提出建议 [https://imgur.com/93O1kX7]，它不会在状态栏上彻底显示。

编辑：感谢 Albert [ https://imgur.com/5QsztCr ]。

【问题讨论】：

您可以通过省略appBar Scaffold 参数并将此剪辑容器传递到Column 的顶部来实现您想要的，您将在Scaffold 的@ 中拥有987654326@.
嗨，阿尔伯特，我也这样做了，我在编辑中添加了您的建议。但是，状态栏不受它的影响。有没有办法也可以访问状态栏？
那是因为你使用了SafeArea。它正是这样做的:)
嗨 Albert 检查另一个编辑和它的照片！ :)

标签： flutter user-interface flutter-layout

【解决方案1】：

您可以通过省略appBar Scaffold 参数并将此剪辑容器传递到Column 的顶部来实现您想要的，您将在Scaffold 的body 中拥有。

还请记住，SafeArea 会从状态栏中填充其他内容。

【讨论】：