Flutter图形绘制插件trapezoid的使用

Flutter图形绘制插件trapezoid的使用

pub package

一个可自定义的梯形组件，可以包含文字、图标，并且可以被分成多个可点击的部分。与图像相比，每个部分都可以单独响应点击事件。适用于Android、iOS、Web、Windows、Linux和Mac平台。

安装

在你的pubspec.yaml文件中添加以下依赖：

dependencies:
  trapezoid: ^1.0.1

然后导入该库：

import 'package:trapezoid/trapezoid.dart';

如何使用

创建一个Trapezoid组件并传递所需的参数：

Trapezoid(
  firstButtonAction: () => 0,
  afterLastTrapeze: Padding(
    padding: const EdgeInsets.only(left: 3),
    child: Container(
      width: 90,
      height: 20,
      decoration: const BoxDecoration(color: Color.fromRGBO(156, 17, 6, 1)),
    ),
  ),
  firstDecoration: const BoxDecoration(color: Color.fromRGBO(248, 151, 0, 1)),
  secondDecoration: const BoxDecoration(color: Color.fromRGBO(246, 103, 16, 1)),
  thirdDecoration: const BoxDecoration(color: Color.fromRGBO(237, 36, 23, 1)),
  fourDecoration: const BoxDecoration(color: Color.fromRGBO(156, 17, 6, 1)),
  childOneFirstTrapeze: const Text('1First', style: TextStyle(fontWeight: FontWeight.bold)),
  childOneSecondTrapeze: const Text('1Second'),
  childOneThirdTrapeze: const Text('1Third'),
  childTwoFirstTrapeze: const Text('2First', style: TextStyle(fontWeight: FontWeight.bold)),
  childTwoSecondTrapeze: Text('2Second', style: TextStyle(color: Colors.purple[900])),
  childTwoThirdTrapeze: const Text('2Third'),
  childThreeFirstTrapeze: const Text('3First', style: TextStyle(fontWeight: FontWeight.bold)),
  childThreeSecondTrapeze: const Text('3Second'),
  childThreeThirdTrapeze: const Text('3Third'),
  childFourFirstTrapeze: const Text('4First', style: TextStyle(fontWeight: FontWeight.bold)),
  childFourSecondTrapeze: const Text('4Second', style: TextStyle(color: Colors.amber)),
  childFourThirdTrapeze: const Text('4Third'),
  firstIcon: const Positioned(
    top: 7,
    left: 20,
    child: Icon(Icons.add_shopping_cart_sharp, color: Colors.deepPurpleAccent),
  ),
  thirdIcon: const Positioned(top: 7, right: 20, child: Icon(Icons.add_chart, color: Colors.white70)),
  secondIcon:
      const Positioned(top: 14, right: 20, child: Icon(Icons.stacked_line_chart_outlined, color: Colors.white)),
)

示例

梯形示例：

图片1 图片2

示例代码

这是完整的示例代码，可以在你的项目中使用：

import 'package:flutter/material.dart';
import 'package:trapezoid/trapezoid.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Trapezoid Example',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Trapezoid Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  TextEditingController textCtrl = TextEditingController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        alignment: Alignment.center,
        child: Trapezoid(
          firstButtonAction: () => 0,
          afterLastTrapeze: Padding(
            padding: const EdgeInsets.only(left: 3),
            child: Container(
              width: 90,
              height: 20,
              decoration: const BoxDecoration(color: Color.fromRGBO(156, 17, 6, 1)),
            ),
          ),
          firstDecoration: const BoxDecoration(color: Color.fromRGBO(248, 151, 0, 1)),
          secondDecoration: const BoxDecoration(color: Color.fromRGBO(246, 103, 16, 1)),
          thirdDecoration: const BoxDecoration(color: Color.fromRGBO(237, 36, 23, 1)),
          fourDecoration: const BoxDecoration(color: Color.fromRGBO(156, 17, 6, 1)),
          childOneFirstTrapeze: const Text('1First', style: TextStyle(fontWeight: FontWeight.bold)),
          childOneSecondTrapeze: const Text('1Second'),
          childOneThirdTrapeze: const Text('1Third'),
          childTwoFirstTrapeze: const Text('2First', style: TextStyle(fontWeight: FontWeight.bold)),
          childTwoSecondTrapeze: Text('2Second', style: TextStyle(color: Colors.purple[900])),
          childTwoThirdTrapeze: const Text('2Third'),
          childThreeFirstTrapeze: const Text('3First', style: TextStyle(fontWeight: FontWeight.bold)),
          childThreeSecondTrapeze: const Text('3Second'),
          childThreeThirdTrapeze: const Text('3Third'),
          childFourFirstTrapeze: const Text('4First', style: TextStyle(fontWeight: FontWeight.bold)),
          childFourSecondTrapeze: const Text('4Second', style: TextStyle(color: Colors.amber)),
          childFourThirdTrapeze: const Text('4Third'),
          firstIcon: const Positioned(
            top: 7,
            left: 20,
            child: Icon(Icons.add_shopping_cart_sharp, color: Colors.deepPurpleAccent),
          ),
          thirdIcon: const Positioned(top: 7, right: 20, child: Icon(Icons.add_chart, color: Colors.white70)),
          secondIcon:
              const Positioned(top: 14, right: 20, child: Icon(Icons.stacked_line_chart_outlined, color: Colors.white)),
        ),
      ),
    );
  }
}

更多关于Flutter图形绘制插件trapezoid的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter图形绘制插件trapezoid的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，关于Flutter中如何使用trapezoid图形绘制插件（需要注意的是，Flutter社区和官方插件库中并没有一个直接名为trapezoid的官方插件，但我们可以自定义绘制梯形或查找类似的第三方库，这里假设我们需要自定义绘制梯形），以下是一个如何在Flutter中自定义绘制梯形的代码示例。

首先，我们需要创建一个自定义绘制类，继承CustomPainter，并在paint方法中实现梯形的绘制。以下是一个简单的例子：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Trapezoid Drawing Example'),
        ),
        body: Center(
          child: CustomPaint(
            size: Size(300, 300),
            painter: TrapezoidPainter(),
          ),
        ),
      ),
    );
  }
}

class TrapezoidPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final Paint paint = Paint()
      ..color = Colors.blue
      ..style = PaintingStyle.fill;

    // 定义梯形的四个顶点
    final Offset topLeft = Offset(50, 50);
    final Offset topRight = Offset(250, 50);
    final Offset bottomLeft = Offset(0, 200);
    final Offset bottomRight = Offset(300, 200);

    // 创建一个Path来表示梯形
    final Path path = Path()
      ..moveTo(topLeft.dx, topLeft.dy)
      ..lineTo(topRight.dx, topRight.dy)
      ..lineTo(bottomRight.dx, bottomRight.dy)
      ..lineTo(bottomLeft.dx, bottomLeft.dy)
      ..close();

    // 使用Path绘制梯形
    canvas.drawPath(path, paint);
  }

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

在这个例子中：

  1. 我们创建了一个MyApp应用，其中包含一个Scaffold和一个居中的CustomPaint组件。
  2. CustomPaint组件的大小被设置为Size(300, 300)，并使用TrapezoidPainter作为绘制器。
  3. TrapezoidPainter类继承自CustomPainter，并在paint方法中定义了一个梯形的四个顶点，然后使用Path类来连接这些顶点形成一个封闭的路径，并最终使用Canvas的drawPath方法绘制出来。

这个示例展示了如何在Flutter中自定义绘制一个梯形。如果你找到一个名为trapezoid的第三方插件，并且它的使用方法与自定义绘制有显著不同，通常该插件的README文件或文档会提供详细的使用指南和代码示例。在实际开发中，请务必参考该插件的官方文档。

回到顶部