Flutter 如何使用LayoutBuilder 根据内容自适应自动创建连续的小点?

41 min read

使用LayoutBuilder和CustomPaint可以根据内容自适应自动创建连续的小点，具体步骤如下：

  1. 创建一个StatefulWidget，命名为DotsWidget。

  2. 在DotsWidget的build方法中，使用LayoutBuilder获取父Widget的宽度和高度信息。

  3. 在DotsWidget的build方法中，使用CustomPaint创建一个画布，并在画布上绘制小点。

  4. 在CustomPaint的paint方法中，使用Canvas.drawCircle方法绘制圆形小点。

  5. 根据父Widget的宽度和高度信息计算出绘制小点的位置，可以使用For循环实现连续绘制小点。

完整代码如下：

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

class DotsWidget extends StatefulWidget {
  final int count;

  DotsWidget({this.count});

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

class _DotsWidgetState extends State<DotsWidget> {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        return CustomPaint(
          painter: DotsPainter(
            count: widget.count,
            size: constraints.biggest,
          ),
        );
      },
    );
  }
}

class DotsPainter extends CustomPainter {
  final int count;
  final Size size;

  DotsPainter({this.count, this.size});

  @override
  void paint(Canvas canvas, Size size) {
    final double radius = 3.0;
    final double spacing = 10.0;
    final double startX = (size.width - (count * (2 * radius + spacing) - spacing)) / 2.0;
    final double centerY = size.height / 2.0;
    
    for (int i = 0; i < count; i++) {
      canvas.drawCircle(
        Offset(startX + i * (2 * radius + spacing) + radius, centerY),
        radius,
        Paint()..color = Color(0xFFAAAAAA),
      );
    }
  }

  @override
  bool shouldRepaint(DotsPainter oldDelegate) {
    return true;
  }
}

然后在需要显示小点的Widget中，使用DotsWidget即可，例如：

class ExampleWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 20.0,
      child: DotsWidget(count: 10),
    );
  }
}

这样就可以根据内容自适应自动创建连续的小点了。