dart 如何在Flutter中设计支架或匹配UPS

kknvjkwl  于 2023-10-13  发布在  Flutter
关注(0)|答案(1)|浏览(123)

有谁知道如何设计这样的组件。
有两个列表First List包含所有参与者,Second List包含获胜者。
我想知道如何设计显示获奖者的Blue line组件。

vyu0f0g1

vyu0f0g11#

实现一个CustomPainter,类似于HTML5 Canvas。这里有一篇很好的文章可以让你开始:https://medium.com/flutter-community/a-deep-dive-into-custompaint-in-flutter-47ab44e3f216
下面是一些摘录,给予您一个外观和感觉。

import 'package:flutter/material.dart';

class BracketPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final Paint paint = Paint()
      ..color = Colors.grey
      ..strokeWidth = 2.0;

    final double width = size.width;
    final double height = size.height;

    // Drawing the bracket lines
    canvas.drawLine(Offset(width * 0.5, 0), Offset(width * 0.5, height * 0.25), paint); // Top vertical line
    canvas.drawLine(Offset(width * 0.5, height * 0.75), Offset(width * 0.5, height), paint); // Bottom vertical line
    canvas.drawLine(Offset(width * 0.25, height * 0.25), Offset(width * 0.75, height * 0.25), paint); // Top horizontal line
    canvas.drawLine(Offset(width * 0.25, height * 0.75), Offset(width * 0.75, height * 0.75), paint); // Bottom horizontal line
    canvas.drawLine(Offset(width * 0.5, height * 0.25), Offset(width * 0.5, height * 0.75), paint); // Middle vertical line
  }

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

相关问题