时间戳

首页 > 解决方案 > 在应用程序栏上颤动剪辑路径

flutter - 在应用程序栏上颤动剪辑路径

问题描述

嗨，我的剪辑路径有问题，我正在尝试像插入的图像链接 [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 ]。

标签： flutteruser-interfaceflutter-layout

解决方案

您可以通过省略appBar Scaffold参数并将此剪辑容器传递Column到您Scaffold的body.

还要记住SafeArea从状态栏出来的填充物等等。

推荐阅读