有谁知道如何设计这样的组件。有两个列表First List包含所有参与者,Second List包含获胜者。我想知道如何设计显示获奖者的Blue line组件。
First List
Second List
Blue line
vyu0f0g11#
实现一个CustomPainter,类似于HTML5 Canvas。这里有一篇很好的文章可以让你开始:https://medium.com/flutter-community/a-deep-dive-into-custompaint-in-flutter-47ab44e3f216下面是一些摘录,给予您一个外观和感觉。
CustomPainter
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; } }
1条答案
按热度按时间vyu0f0g11#
实现一个
CustomPainter
,类似于HTML5 Canvas。这里有一篇很好的文章可以让你开始:https://medium.com/flutter-community/a-deep-dive-into-custompaint-in-flutter-47ab44e3f216下面是一些摘录,给予您一个外观和感觉。