flutter的custompaint组件示例5

这段代码是一个简单的Flutter应用程序，它创建了一个可拖动的自定义圆角矩形组件。

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('Draggable Custom UI Component Example'),
        ),
        body: DraggableCustomRoundedRectangle(),
      ),
    );
  }
}

class DraggableCustomRoundedRectangle extends StatefulWidget {
  @override
  _DraggableCustomRoundedRectangleState createState() =>
      _DraggableCustomRoundedRectangleState();
}

class _DraggableCustomRoundedRectangleState
    extends State<DraggableCustomRoundedRectangle> {
  Offset _position = Offset(0.0, 0.0);

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Positioned(
          left: _position.dx,
          top: _position.dy,
          child: GestureDetector(
            onPanUpdate: (details) {
              setState(() {
                _position += details.delta;
              });
            },
            child: CustomPaint(
              painter: RoundedRectanglePainter(),
              child: Container(
                width: 200,
                height: 100,
                alignment: Alignment.center,
                child: Text(
                  'Drag me!',
                  style: TextStyle(color: Colors.white, fontSize: 18),
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}

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

    Rect rect = Rect.fromLTWH(0, 0, size.width, size.height);
    RRect rRect = RRect.fromRectAndRadius(rect, Radius.circular(10));

    // Draw the rounded rectangle
    canvas.drawRRect(rRect, paint);
  }

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

以下是对这段代码的分析：
一、整体功能概述
这段 Flutter 代码实现了一个可拖动的自定义圆角矩形 UI 组件。用户可以在屏幕上拖动这个带有 “Drag me!” 文本的蓝色圆角矩形。

二、代码结构解析
导入部分
import ‘package:flutter/material.dart’;：导入 Flutter 的核心库，以便使用 Flutter 提供的各种 UI 组件和功能。

main函数
void main() { runApp(MyApp()); }：这是应用的入口点，调用runApp函数并传入MyApp实例，启动整个 Flutter 应用。

MyApp类
继承自StatelessWidget，表示这是一个无状态的组件。
build方法中返回一个MaterialApp，设置了应用的标题栏和主页内容。
标题栏显示为 “Draggable Custom UI Component Example”。
主页内容是一个Scaffold，其中包含一个AppBar和一个名为DraggableCustomRoundedRectangle的自定义组件。

DraggableCustomRoundedRectangle类
继承自StatefulWidget，表示这是一个有状态的组件。
createState方法返回一个_DraggableCustomRoundedRectangleState实例，用于管理该组件的状态。

_DraggableCustomRoundedRectangleState类
定义了一个Offset _position变量，用于记录圆角矩形的位置。
build方法中使用Stack布局，将一个可拖动的圆角矩形放置在特定位置。
通过Positioned组件根据_position变量确定圆角矩形的位置。
GestureDetector用于检测用户的拖动操作，当用户拖动时，通过onPanUpdate回调函数更新_position变量，并调用setState方法触发界面重新绘制。
内部使用CustomPaint和RoundedRectanglePainter绘制圆角矩形，并在矩形中间显示 “Drag me!” 文本。

RoundedRectanglePainter类
继承自CustomPainter，用于自定义绘制圆角矩形。
paint方法中定义了画笔的颜色、样式和宽度，然后创建一个矩形和圆角矩形，并使用画布绘制这个圆角矩形。
shouldRepaint方法返回false，表示在没有状态变化时不需要重新绘制这个画家。

三、总结
这段代码通过组合使用 Flutter 的各种组件和自定义画家，实现了一个具有特定功能的可拖动圆角矩形 UI 组件，展示了 Flutter 在自定义 UI 设计和交互方面的强大能力。