Flutter 自定义Widget 圆角矩形加三角指示器

最新推荐文章于 2025-12-03 16:43:53 发布

原创

最新推荐文章于 2025-12-03 16:43:53 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了如何在Flutter中通过自定义画笔和代码实现复杂的气泡提示组件，包括圆角矩形和可变位置的三角指示器，同时关注包大小优化。作者分享了详细的代码实现和关键参数控制。

一般app设计中都会有气泡提示，这个时候就需要用到切图了，在flutter中不管你信不信反正对于.9的这块还是很不友好的，使用起来特别麻烦。要是安卓中这或许会很简单。
但即使支持.9 如果气泡样式很多，对于app的包大小占用其实还是有那么一丢丢的影响的。
我采用了是用代码的方式实现了圆角矩形带三角指示器
现看看效果吧
在这里插入图片描述

在这里插入图片描述
上面就是ui给出的效果，其中底部的三角形距离左边的位置还是动态可变，背景颜色还是渐变的。
使用了CustomPaint方式实现一套圆角矩形加指示器的控件，下面是代码实现

ExRoundTriangleWidget

import 'dart:math';

import 'package:flutter/material.dart';

import 'ex_text.dart';

/// 圆角矩形 + 三角提示布局
class ExRoundTriangleWidget extends StatelessWidget {
  /// 子布局
  final String data; // 文案
  final TextStyle textStyle;
  final double roundRadius; // 圆角半径
  final double triangleWidth; // 三角形的宽度
  final double triangleHeight; // 三角形的高度
  final double triangleDistance; // 三角形距离左边的距离
  final bool triangle