Flutter投票組件使用方法詳解

更新時(shí)間：2022年08月24日 09:09:37 作者：懷君

這篇文章主要為大家詳細(xì)介紹了Flutter投票組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Flutter投票組件的使用方法，供大家參考，具體內(nèi)容如下

前景

基于公司項(xiàng)目需求，仿照微博實(shí)現(xiàn)投票功能。

開發(fā)遇到的問題

1.選項(xiàng)列表的高度，自適應(yīng)的問題；
2.進(jìn)度條動(dòng)畫的問題；
3.列表回收機(jī)制，導(dǎo)致進(jìn)度條動(dòng)畫重復(fù)；
4.自定義進(jìn)度條四周圓角；

如何解決問題

拿到數(shù)組列表最長的數(shù)據(jù)，然后根據(jù)屏幕寬度計(jì)算，超出一行則設(shè)定兩行高度，否則使用一行的高度；

_didExceedOneMoreLines(String text, double width, TextStyle style) {
? ? final span = TextSpan(text: text, style: style);
? ? final tp =
? ? ? ? TextPainter(text: span, maxLines: 1, textDirection: TextDirection.ltr);
? ? tp.layout(maxWidth: width);
? ? if (tp.didExceedMaxLines) {
? ? //設(shè)置item選項(xiàng)的高度
? ? ? _itemHeight = 100.w;
? ? }
? }

Widget控件初始化（initState）方法時(shí)，使用AnimationController動(dòng)畫，并實(shí)現(xiàn)SingleTickerProviderStateMixin，在build方法當(dāng)中調(diào)用 _controller.animateTo()

AnimationController _controller;
? ? _controller = AnimationController(
? ? ? vsync: this,
? ? ? duration: const Duration(seconds: 1),
? ? )..addListener(() {
? ? ? ? setState(() {});
? ? ? });
//觸發(fā)動(dòng)畫，執(zhí)行的位置
_controller.animateTo()

在列表數(shù)據(jù)當(dāng)中給動(dòng)畫標(biāo)記字段，讓其是否執(zhí)行動(dòng)畫；當(dāng)用戶投票成功，改變狀態(tài)執(zhí)行進(jìn)度條動(dòng)畫。用戶滑動(dòng)列表之后，將標(biāo)記改為false。關(guān)閉動(dòng)畫效果。
針對修改部分源碼，設(shè)置進(jìn)度條圓角控件；

import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class RoundLinearProgressPainter extends ProgressIndicator {
? const RoundLinearProgressPainter({
? ? Key key,
? ? double value,
? ? Color backgroundColor,
? ? Color color,
? ? Animation<Color> valueColor,
? ? this.minHeight,
? ? String semanticsLabel,
? ? String semanticsValue,
? }) ?: assert(minHeight == null || minHeight > 0),
? ? ? ? super(
? ? ? ? ? key: key,
? ? ? ? ? value: value,
? ? ? ? ? backgroundColor: backgroundColor,
? ? ? ? ? color: color,
? ? ? ? ? valueColor: valueColor,
? ? ? ? ? semanticsLabel: semanticsLabel,
? ? ? ? ? semanticsValue: semanticsValue,
? ? ? ? );

? final double minHeight;

? @override
? _RoundLinearProgressPainterState createState() =>
? ? ? _RoundLinearProgressPainterState();
}

class _RoundLinearProgressPainterState extends State<RoundLinearProgressPainter>
? ? with SingleTickerProviderStateMixin {
? AnimationController _controller;

? @override
? void initState() {
? ? super.initState();
? ? _controller = AnimationController(
? ? ? duration: const Duration(milliseconds: 1),
? ? ? vsync: this,
? ? )..addListener(() {
? ? ? ? setState(() {});
? ? ? });
? ? if (widget.value != null) _controller.forward();
? }

? @override
? Widget build(BuildContext context) {
? ? return widget._buildSemanticsWrapper(
? ? ? context: context,
? ? ? child: Container(
? ? ? ? constraints: BoxConstraints(
? ? ? ? ? minWidth: double.infinity,
? ? ? ? ? minHeight: widget.minHeight ?? 4.0,
? ? ? ? ),
? ? ? ? child: CustomPaint(
? ? ? ? ? painter: _LinearProgressIndicatorPainter(
? ? ? ? ? ? backgroundColor: widget._getBackgroundColor(context),
? ? ? ? ? ? valueColor: widget._getValueColor(context),
? ? ? ? ? ? value: widget.value,
? ? ? ? ? ? animationValue: _controller.value,
? ? ? ? ? ),
? ? ? ? ),
? ? ? ),
? ? );
? }

? @override
? void didUpdateWidget(RoundLinearProgressPainter oldWidget) {
? ? super.didUpdateWidget(oldWidget);
? ? if (widget.value == null && !_controller.isAnimating)
? ? ? _controller.repeat();
? ? else if (widget.value != null && _controller.isAnimating)
? ? ? _controller.stop();
? }

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

class _LinearProgressIndicatorPainter extends CustomPainter {
? const _LinearProgressIndicatorPainter({
? ? this.backgroundColor,
? ? this.valueColor,
? ? this.value,
? ? this.animationValue,
? });

? final Color backgroundColor;
? final Color valueColor;
? final double value;
? final double animationValue;

? @override
? void paint(Canvas canvas, Size size) {
? ? final Paint paint = Paint()
? ? ? ..color = backgroundColor
? ? ? ..isAntiAlias = true
? ? ? ..style = PaintingStyle.fill;
? ? canvas.drawRect(Offset.zero & size, paint);
? ? paint.color = valueColor;
? ? void drawBar(double x, double width) {
? ? ? if (width <= 0.0) return;
? ? ? RRect rRect;
? ? ? ///圓角的寬度
? ? ? var radius = Radius.circular(8.w);
? ? ? if (value == 1.0) {
? ? ? ///當(dāng)進(jìn)度條為1時(shí)，設(shè)置四周圓角
? ? ? ? rRect = RRect.fromRectAndRadius(
? ? ? ? ? ? Offset(0.0, 0.0) & Size(width, size.height), radius);
? ? ? } else {
? ? ? ? ///小于1時(shí)，設(shè)置左側(cè)圓角
? ? ? ? rRect = RRect.fromRectAndCorners(
? ? ? ? ? ? Offset(0.0, 0.0) & Size(width, size.height),
? ? ? ? ? ? topLeft: radius,
? ? ? ? ? ? bottomLeft: radius);
? ? ? }
? ? ? canvas.drawRRect(rRect, paint);
? ? }

? ? if (value != null) {
? ? ? drawBar(0.0, value.clamp(0.0, 1.0) * size.width);
? ? }
? }

? @override
? bool shouldRepaint(_LinearProgressIndicatorPainter oldPainter) {
? ? return oldPainter.backgroundColor != backgroundColor ||
? ? ? ? oldPainter.valueColor != valueColor ||
? ? ? ? oldPainter.value != value ||
? ? ? ? oldPainter.animationValue != animationValue;
? }
}

abstract class ProgressIndicator extends StatefulWidget {
? const ProgressIndicator({
? ? Key key,
? ? this.value,
? ? this.backgroundColor,
? ? this.color,
? ? this.valueColor,
? ? this.semanticsLabel,
? ? this.semanticsValue,
? }) : super(key: key);

? final double value;

? final Color backgroundColor;

? final Color color;

? final Animation<Color> valueColor;

? final String semanticsLabel;

? final String semanticsValue;

? Color _getBackgroundColor(BuildContext context) =>
? ? ? backgroundColor ?? Theme.of(context).colorScheme.background;

? Color _getValueColor(BuildContext context) =>
? ? ? valueColor?.value ?? color ?? Theme.of(context).colorScheme.primary;

? @override
? void debugFillProperties(DiagnosticPropertiesBuilder properties) {
? ? super.debugFillProperties(properties);
? ? properties.add(PercentProperty('value', value,
? ? ? ? showName: false, ifNull: '<indeterminate>'));
? }

? Widget _buildSemanticsWrapper({
? ? BuildContext context,
? ? Widget child,
? }) {
? ? String expandedSemanticsValue = semanticsValue;
? ? if (value != null) {
? ? ? expandedSemanticsValue ??= '${(value * 100).round()}%';
? ? }
? ? return Semantics(
? ? ? label: semanticsLabel,
? ? ? value: expandedSemanticsValue,
? ? ? child: child,
? ? );
? }
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: