在 flutter 中用 2 张图片设计背景

Question

我想创建一个新的无状态小部件 class，它由 2 个图像（顶部、底部）和一条线（由函数定义，例如 (x){x+500}、一个宽度（可以是 0，如果它不应该被绘制）和颜色）分隔两个图像。

对于每个像素：

如果一个像素的y位置大于f(x) + width/2的结果，则绘制底部的一个像素
如果小于f(x) - width / 2，则绘制顶部的一个像素
否则应绘制给定线条颜色的像素

看一下 mywidget({'top': A, 'bottom': B, 'f': (x){return sin(x)+500;}, 'width': 1, 'color': Color(0xFFFFFFFF)}); 的示例：

(0,0)
+------+
|      |
|  A   |
| __   |
|/  \__|
|      |
|  B   |
+------+(e.g. 1920,1080)

是否有形状由（数学）函数定义的线条小部件？

是 the only way to do it? Or is there a container widget that already allows this? I have looked at the Stack widget 但这并不能完全解决问题，因为我需要一个结构来决定渲染哪个像素，如上所述。决定哪个应该发生的功能应该由用户提供。

Answer 1

ClipPath 和 CustomClipper<Path> 可以帮助你。
您可以获得什么：

示例源代码：

import 'dart:math';

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: ClippedPartsWidget(
          top: Container(
            color: Colors.red,
          ),
          bottom: Container(
            color: Colors.blue,
          ),
          splitFunction: (Size size, double x) {
            // normalizing x to make it exactly one wave
            final normalizedX = x / size.width * 2 * pi;
            final waveHeight = size.height / 15;
            final y = size.height / 2 - sin(normalizedX) * waveHeight;

            return y;
          },
        ),
      ),
    ),
  );
}

class ClippedPartsWidget extends StatelessWidget {
  final Widget top;
  final Widget bottom;
  final double Function(Size, double) splitFunction;

  ClippedPartsWidget({
    @required this.top,
    @required this.bottom,
    @required this.splitFunction,
  });

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        // I'm putting unmodified top widget to back. I wont cut it.
        // Instead I'll overlay it with clipped bottom widget.
        top,
        Align(
          alignment: Alignment.bottomCenter,
          child: ClipPath(
            clipper: FunctionClipper(splitFunction: splitFunction),
            child: bottom,
          ),
        ),
      ],
    );
  }
}

class FunctionClipper extends CustomClipper<Path> {
  final double Function(Size, double) splitFunction;

  FunctionClipper({@required this.splitFunction}) : super();

  Path getClip(Size size) {
    final path = Path();

    // move to split line starting point
    path.moveTo(0, splitFunction(size, 0));

    // draw split line
    for (double x = 1; x <= size.width; x++) {
      path.lineTo(x, splitFunction(size, x));
    }

    // close bottom part of screen
    path.lineTo(size.width, size.height);
    path.lineTo(0, size.height);

    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    // I'm returning fixed 'true' value here for simplicity, it's not the part of actual question
    // basically that means that clipping will be redrawn on any changes
    return true;
  }
}

在 flutter 中用 2 张图片设计背景

Design a background from 2 images in flutter

background

flutter

flutter-layout