用颤动画线

Question

有什么方法可以在顶部和底部显示倾斜边框？我通过使用两个图像（top_layout 和 bottom_layout.png）想出了下面的解决方案。有没有其他方法可以在不使用静态图像的情况下制作带有阴影的颜色条？

return Container(
      color: const Color.fromARGB(255, 236, 0, 140),
      child: Container(
        padding: const EdgeInsets.all(8.0),
        child: Container(
          color: Colors.white,
          margin:
              EdgeInsets.only(top: 60.0, bottom: 20.0, left: 15.0, right: 15.0),
          child: Stack(
            children: <Widget>[
              Positioned.fill(
                child: Image.asset(
                  "assets/imgs/top_layout.png",
                  fit: BoxFit.fitWidth,
                  alignment: Alignment.topCenter,
                ),
              ),
              Positioned.fill(
                child: Image.asset(
                  "assets/imgs/xbottom_layout.png",
                  fit: BoxFit.fitWidth,
                  alignment: Alignment.bottomLeft,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

Answer 1

在这种情况下，您想改用 Custom Painter 小部件。您可以根据坐标绘制形状。

有关详细信息，请参阅本教程。 Drawing Custom Shapes in Flutter using CustomPainter

Answer 2

Flutter 中如何使用 CustomPaint widget 画线

要在 Flutter 中绘画，您可以使用 CustomPaint widget. The CustomPaint widget takes a CustomPainter 对象作为参数。在那个 class 中，你必须重写 paint 方法，它给你一个 canvas 可以在上面绘画。这是在上图中画线的代码。

@override
void paint(Canvas canvas, Size size) {
  final p1 = Offset(50, 50);
  final p2 = Offset(250, 150);
  final paint = Paint()
    ..color = Colors.black
    ..strokeWidth = 4;
  canvas.drawLine(p1, p2, paint);
}

备注：

drawLine 方法画一条线连接您给它的两点。
Offset 是一对 (dx, dy) 双打，从 CustomPaint 小部件的左上角偏移。

另一种选择

您可以使用 PointMode.polygon 选项对 drawPoints 方法执行类似的操作。

@override
void paint(Canvas canvas, Size size) {
  final pointMode = ui.PointMode.polygon;
  final points = [
    Offset(50, 100),
    Offset(150, 75),
    Offset(250, 250),
    Offset(130, 200),
    Offset(270, 100),
  ];
  final paint = Paint()
    ..color = Colors.black
    ..strokeWidth = 4
    ..strokeCap = StrokeCap.round;
  canvas.drawPoints(pointMode, points, paint);
}

上下文

这是 main.dart 代码，以便您可以在上下文中查看它。

import 'dart:ui' as ui;
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: HomeWidget(),
      ),
    );
  }
}

class HomeWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: CustomPaint( //                       <-- CustomPaint widget
        size: Size(300, 300),
        painter: MyPainter(),
      ),
    );
  }
}

class MyPainter extends CustomPainter { //         <-- CustomPainter class
  @override
  void paint(Canvas canvas, Size size) {
    //                                             <-- Insert your painting code here.
  }

  @override
  bool shouldRepaint(CustomPainter old) {
    return false;
  }
}

另见

请参阅 this article 以获得更完整的答案。

用颤动画线

Draw lines with flutter

dart

flutter

flutter-layout

Flutter 中如何使用 CustomPaint widget 画线

另一种选择

上下文

另见