Android 颤振：如何自下而上自定义剪辑图像？_Android_Ios_Flutter_Mobile

Android 颤振：如何自下而上自定义剪辑图像？

android ios flutter mobile

Android 颤振：如何自下而上自定义剪辑图像？,android,ios,flutter,mobile,Android,Ios,Flutter,Mobile,我正在开发一个颤振项目，并试图剪辑图像。下面是我的代码 import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { final appTitle = 'Drawer Demo'; @override Widget build(BuildContext context) { return MaterialAp

我正在开发一个颤振项目，并试图剪辑图像。下面是我的代码

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;
}

导入“包装：颤振/材料.省道”；
void main（）=>runApp（MyApp（））；
类MyApp扩展了无状态小部件{
最终appTitle=‘抽屉演示’；
@凌驾
小部件构建（构建上下文）{
返回材料PP(
标题：appTitle，
主页：我的主页（标题：appTitle），
);
}
}
类MyHomePage扩展了无状态小部件{
最后的字符串标题；
var scaffoldKey=GlobalKey（）；
MyHomePage（{Key，this.title}）：超级（Key:Key）；
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar（标题：文本（“这是appBar”），），
主体：堆栈(
儿童：[
填充物(
填充：仅限常量边集（底部：2.0），
孩子：克利帕斯(
裁剪器：裁剪类（），
子：容器(
宽度：MediaQuery
.of（上下文）
.尺寸
.宽度，
高度：320.0，
装饰：盒子装饰(
图像：装饰图像(
适合：BoxFit.cover，
图片：NetworkImage(
"https://picsum.photos/250?image=9"))
),
),
),
),
],
),
);
}
}
类ClippingClass扩展了CustomClipper{
@凌驾
路径getClip（大小）{
var path=path（）；
path.lineTo（0.0，大小。高度-40）；
路径。方形贝塞尔托（尺寸。宽度/4，尺寸。高度，
尺寸。宽度/2，尺寸。高度）；
路径。方形贝塞尔托（size.width-（size.width/4），size.height，
尺寸.宽度，尺寸.高度-40）；
path.lineTo（size.width，0.0）；
path.close（）；
返回路径；
}
@凌驾
bool shouldReclip（CustomClipper oldClipper）=>false；
}

下面是结果

然而，我的意图不是让曲线从下到上。相反，这里我有它从下到下

我需要的是以下内容（忽略这些行，它们是来自Adobe XD的指导行）

我如何才能做到这一点？

您只需在绘制的路径高度中反转应用

-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();

您只需在绘制的路径高度中反转应用

-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();

变化是

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;
}

导入“包装：颤振/材料.省道”；
void main（）=>runApp（MyApp（））；
类MyApp扩展了无状态小部件{
最终appTitle=‘抽屉演示’；
@凌驾
小部件构建（构建上下文）{
返回材料PP(
标题：appTitle，
主页：我的主页（标题：appTitle），
);
}
}
类MyHomePage扩展了无状态小部件{
最后的字符串标题；
var scaffoldKey=GlobalKey（）；
MyHomePage（{Key，this.title}）：超级（Key:Key）；
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar（标题：文本（“这是appBar”），），
主体：堆栈(
儿童：[
填充物(
填充：仅限常量边集（底部：2.0），
孩子：克利帕斯(
裁剪器：裁剪类（），
子：容器(
宽度：MediaQuery
.of（上下文）
.尺寸
.宽度，
高度：320.0，
装饰：盒子装饰(
图像：装饰图像(
适合：BoxFit.cover，
图片：NetworkImage(
"https://picsum.photos/250?image=9"))
),
),
),
),
],
),
);
}
}
类ClippingClass扩展了CustomClipper{
@凌驾
路径getClip（大小）{
var path=path（）；
path.lineTo（0.0，大小.高度）；
路径。方形贝塞尔托（size.width/4，size.height-40，size.width/2，size.height-40）；
路径。方形贝塞尔托（size.width-（size.width/4），size.height-40，size.width，size.height-0）；
path.lineTo（size.width，0.0）；
path.close（）；
返回路径；
}
@凌驾
bool shouldReclip（CustomClipper oldClipper）=>false；
}

更改正在进行中

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;
}

导入“包装：颤振/材料.省道”；
void main（）=>runApp（MyApp（））；
类MyApp扩展了无状态小部件{
最终appTitle=‘抽屉演示’；
@凌驾
小部件构建（构建上下文）{
返回材料PP(
标题：appTitle，
主页：我的主页（标题：appTitle），
);
}
}
类MyHomePage扩展了无状态小部件{
最后的字符串标题；
var scaffoldKey=GlobalKey（）；
MyHomePage（{Key，this.title}）：超级（Key:Key）；
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar（标题：文本（“这是appBar”），），
主体：堆栈(
儿童：[
填充物(
填充：仅限常量边集（底部：2.0），
孩子：克利帕斯(
裁剪器：裁剪类（），
子：容器(
宽度：MediaQuery
.of（上下文）
.尺寸
.宽度，
高度：320.0，
装饰：盒子装饰(
图像：装饰图像(
适合：BoxFit.cover，
图片：NetworkImage(
"https://picsum.photos/250?image=9"))
),
),
),
),
],
),
);
}
}
类ClippingClass扩展了CustomClipper{
@凌驾
路径getClip（大小）{
var path=path（）；
path.lineTo（0.0，大小.高度）；
路径。方形贝塞尔托（size.width/4，size.height-40，size.width/2，size.height-40）；
路径。方形贝塞尔托（size.width-（size.width/4），size.height-40，size.width，size.height-0）；
路径