在扑朔迷离中面临的问题

由 lvero发布于 2020-05-18 14:08:04 flutterflutter-layout

我当前的代码：

Container(
                  height: 1 / 3 * deviceSize.height,
                  width: double.infinity,
                  child: Text(
                    'Add New Location',
                    style: TextStyle(color: Colors.black, fontSize: 20.0),
                  ),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.only(
                        bottomLeft: Radius.elliptical(300, 100),
                        bottomRight: Radius.elliptical(300, 100)),
                    color: Color(0xFFFAD02E),
                  ),
                )

我没有得到想要的结果....：/

小、白痴 2020-05-18 14:08:04 回复

您可以使用自定义裁剪器尝试ClipPath，以使所需的UI更加流畅。但是您的方法仍然可以工作，需要进行一些调整。

ClipPath(
  clipper: ProfileClipper(),
  child: Image(
    height: 300.0,
    width: double.infinity,
    image: AssetImage('You can use image or your desire color use container'),
    fit: BoxFit.cover,
  ),
),

import 'package:flutter/material.dart';

class ProfileClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path();
    path.lineTo(0, 4 * size.height / 5);
    Offset curvePoint = Offset(size.width / 2, size.height);
    Offset endPoint = Offset(size.width, 4 * size.height / 5);
    path.quadraticBezierTo(
      curvePoint.dx,
      curvePoint.dy,
      endPoint.dx,
      endPoint.dy,
    );
    path.lineTo(size.width, 0);
    path.close();
    return path;
  }

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

Laura 2020-05-18 14:08:04 回复

You can use ClipPath

尝试这个

ClipPath(
  clipper: BottomClipper(),
  child: Container(
  height: 200,
  color: Colors.yellow,
  child: Center(child: Text("BottomClipper()")),
 ),
),

BottomClipper（）

import 'package:flutter/material.dart';

class BottomClipper  extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    path.lineTo(0, 0);
    path.lineTo(0, size.height - 40);
    path.quadraticBezierTo(
        size.width / 4, size.height, size.width / 2, size.height);
    path.quadraticBezierTo(
        size.width - size.width / 4, size.height, size.width, size.height - 40);
    path.lineTo(size.width, 0);
    path.lineTo(0, 0);
    return path;
  }

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

输出值