Flutter投票組件使用方法詳解
本文實例為大家分享了Flutter投票組件的使用方法,供大家參考,具體內(nèi)容如下
前景
基于公司項目需求,仿照微博實現(xiàn)投票功能。
開發(fā)遇到的問題
1.選項列表的高度,自適應(yīng)的問題;
2.進度條動畫的問題;
3.列表回收機制,導(dǎo)致進度條動畫重復(fù);
4.自定義進度條四周圓角;
如何解決問題
- 拿到數(shù)組列表最長的數(shù)據(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選項的高度 ? ? ? _itemHeight = 100.w; ? ? } ? }
- Widget控件初始化(initState)方法時,使用AnimationController動畫,并實現(xiàn)SingleTickerProviderStateMixin,在build方法當(dāng)中調(diào)用 _controller.animateTo()
AnimationController _controller; ? ? _controller = AnimationController( ? ? ? vsync: this, ? ? ? duration: const Duration(seconds: 1), ? ? )..addListener(() { ? ? ? ? setState(() {}); ? ? ? }); //觸發(fā)動畫,執(zhí)行的位置 _controller.animateTo()
- 在列表數(shù)據(jù)當(dāng)中給動畫標(biāo)記字段,讓其是否執(zhí)行動畫;當(dāng)用戶投票成功,改變狀態(tài)執(zhí)行進度條動畫。用戶滑動列表之后,將標(biāo)記改為false。關(guān)閉動畫效果。
- 針對修改部分源碼,設(shè)置進度條圓角控件;
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)進度條為1時,設(shè)置四周圓角 ? ? ? ? rRect = RRect.fromRectAndRadius( ? ? ? ? ? ? Offset(0.0, 0.0) & Size(width, size.height), radius); ? ? ? } else { ? ? ? ? ///小于1時,設(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í)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
打飛機游戲終極BOSS Android實戰(zhàn)打飛機游戲完結(jié)篇
打飛機游戲終極BOSS,Android實戰(zhàn)打飛機游戲完結(jié)篇,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-07-07Mac 下 Android Studio 不打印日志的解決辦法
這篇文章主要介紹了Mac 下 Android Studio 不打印日志的解決辦法的相關(guān)資料,希望通過本文能幫助到大家,需要的朋友可以參考下2017-10-10Android實現(xiàn)自適應(yīng)屏幕的彈窗廣告
這篇文章主要為大家詳細(xì)介紹了Android實現(xiàn)自適應(yīng)屏幕的彈窗廣告,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-07-07Android編程實現(xiàn)AIDL(跨進程通信)的方法詳解
這篇文章主要介紹了Android編程實現(xiàn)AIDL(跨進程通信)的方法,結(jié)合實例形式詳細(xì)分析了Android實現(xiàn)AIDL(跨進程通信)的原理、具體流程與相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2016-06-06Android實現(xiàn)微信右側(cè)頂部下拉對話框
這篇文章主要為大家詳細(xì)介紹了Android實現(xiàn)微信右側(cè)頂部下拉對話框,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-12-12Android仿微信QQ聊天頂起輸入法不頂起標(biāo)題欄的問題
這篇文章主要介紹了Android之仿微信QQ聊天頂起輸入法不頂起標(biāo)題欄問題,本文實例圖文相結(jié)合給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11