Flutter 自绘组件: DoneWidget

封面图 • 2025-11-13 • Flutter

在 Flutter 中，如果你想要自定义一个 `DoneWidget`（比如表示“完成”状态的组件），你可以使用 `CustomPaint` 或者直接使用 `Container`、`Icon`、`Text` 等基础组件来构建。下面是一个简单的 `DoneWidget` 实现示例，你可以根据自己的需求进行扩展。

---

## ✅ 示例：自定义 DoneWidget

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

class DoneWidget extends StatelessWidget {
  final Color color;
  final double size;

const DoneWidget({Key? key, this.color = Colors.green, this.size = 24.0})
      : super(key: key);

@override
  Widget build(BuildContext context) {
    return Container(
      width: size,
      height: size,
      decoration: BoxDecoration(
        color: color.withOpacity(0.1),
        borderRadius: BorderRadius.circular(size / 2),
      ),
      child: Icon(
        Icons.check,
        color: color,
        size: size * 0.6,
      ),
    );
  }
}
```

---

## 🔧 使用方式

你可以在其他组件中这样使用：

```dart
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('DoneWidget Example')),
      body: Center(
        child: DoneWidget(color: Colors.blue, size: 40.0),
      ),
    );
  }
}
```

---

## 🎨 可选扩展

你可以进一步扩展这个 `DoneWidget`，例如：

- 添加动画（如缩放、淡入）
- 支持不同的图标（如 `Icons.done_all`, `Icons.done_outline`）
- 自定义文本标签
- 添加点击事件

---

## 🔄 扩展版：带文字和动画的 DoneWidget

```dart
class DoneWidgetWithText extends StatefulWidget {
  final String text;
  final Color color;
  final double size;

const DoneWidgetWithText({
    Key? key,
    this.text = "Done",
    this.color = Colors.green,
    this.size = 40.0,
  }) : super(key: key);

@override
  _DoneWidgetWithTextState createState() => _DoneWidgetWithTextState();
}

class _DoneWidgetWithTextState extends State<DoneWidgetWithText>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

@override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(milliseconds: 300),
      vsync: this,
    );
    _animation = Tween<double>(begin: 0.0, end: 1.0).animate(_controller);
    _controller.forward();
  }

@override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

@override
  Widget build(BuildContext context) {
    return FadeTransition(
      opacity: _animation,
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            width: widget.size,
            height: widget.size,
            decoration: BoxDecoration(
              color: widget.color.withOpacity(0.1),
              borderRadius: BorderRadius.circular(widget.size / 2),
            ),
            child: Icon(
              Icons.check,
              color: widget.color,
              size: widget.size * 0.6,
            ),
          ),
          SizedBox(width: 8),
          Text(
            widget.text,
            style: TextStyle(
              color: widget.color,
              fontSize: 16,
            ),
          ),
        ],
      ),
    );
  }
}
```

---

## ✅ 总结

- `DoneWidget` 可以通过 `Container` + `Icon` 构建。
- 如果需要更复杂的样式或动画，可以使用 `CustomPaint` 或 `AnimatedWidget`。
- 自定义组件可以提高代码复用性，便于维护。

如果你有特定的 UI 设计需求（比如颜色、形状、动画等），欢迎提供细节，我可以帮你定制更符合需求的 `DoneWidget`。