Flutter：如何從下到上自定義剪輯圖像？

Question

我正在開發一個顫振項目並嘗試剪輯圖像。 下面是我的代碼

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final appTitle = 'Drawer Demo';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;
  var scaffoldKey = GlobalKey<ScaffoldState>();
  MyHomePage({Key key, this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    
    return Scaffold(
      
      appBar: AppBar(title: Text("THIS IS APP BAR"),),
      body: Stack(
          children: <Widget>[
            Padding(
            padding: const EdgeInsets.only(bottom: 2.0),
              child:ClipPath(
                clipper: ClippingClass(),
              child: Container(
                width: MediaQuery
                    .of(context)
                    .size
                    .width,
                height: 320.0,
                decoration: BoxDecoration(
                    image: DecorationImage(
                        fit: BoxFit.cover,
                        image: NetworkImage(
                            "https://picsum.photos/250?image=9"))
                ),
              ),
            ),
          ),
          ],
        ),
    );
  }
}

class ClippingClass extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    path.lineTo(0.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.0);
    path.close();
    return path;
  }

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

下面是結果。

然而，我的目的不是讓曲線從下到上。 相反，我從下到下都有它。

我需要的是如下（忽略線條，它們是來自 Adob​​e XD 的指導線）

我怎樣才能做到這一點？

Answer 1

您只需要在正在繪制的路徑的高度中反轉應用-40的位置：

path.lineTo(0.0, size.height);
path.quadraticBezierTo(size.width / 4, size.height - 40,
  size.width / 2, size.height - 40);
path.quadraticBezierTo(size.width - (size.width / 4), size.height - 40,
  size.width, size.height);
path.lineTo(size.width, 0.0);
path.close();

Answer 2

變化是

path.lineTo(0.0, size.height);
path.quadraticBezierTo(size.width / 4, size.height-40,        size.width / 2, size.height-40);
path.quadraticBezierTo(size.width - (size.width / 4), size.height-40,        size.width, size.height - 0);
path.lineTo(size.width, 0.0);

完整解決方案

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final appTitle = 'Drawer Demo';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;
  var scaffoldKey = GlobalKey<ScaffoldState>();
  MyHomePage({Key key, this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(title: Text("THIS IS APP BAR"),),
      body: Stack(
          children: <Widget>[
            Padding(
            padding: const EdgeInsets.only(bottom: 2.0),
              child:ClipPath(
                clipper: ClippingClass(),
              child: Container(
                width: MediaQuery
                    .of(context)
                    .size
                    .width,
                height: 320.0,
                decoration: BoxDecoration(
                    image: DecorationImage(
                        fit: BoxFit.cover,
                        image: NetworkImage(
                            "https://picsum.photos/250?image=9"))
                ),
              ),
            ),
          ),
          ],
        ),
    );
  }
}

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

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