Flutter構(gòu)建自定義Widgets的全過程記錄
一.組合widget實(shí)現(xiàn)
1.android和flutter自定義控件對比
Android中,一般會繼承View或已經(jīng)存在的某個(gè)控件,然后覆蓋draw方法來實(shí)現(xiàn)自定義View。在Flutter中,一個(gè)自定義widget通常是通過組合其它widget來實(shí)現(xiàn)的,而不是繼承。下面看看如何構(gòu)建持有一個(gè)label的CustomButton。這是通過將Text與RaisedButton組合來實(shí)現(xiàn)的,而不是繼承RaisedButton并重寫其繪制方法實(shí)現(xiàn),eg :custombuttontest.dart
import 'package:flutter/material.dart'; class CustomButtonTest extends StatelessWidget{ final String textStr; CustomButtonTest(this.textStr); @override Widget build(BuildContext context) { return RaisedButton( onPressed: (){}, child: Text( textStr, textAlign: TextAlign.center, ) ); } }
上面定義好組件之后,可直接在調(diào)用build的方法中現(xiàn)實(shí),eg :
@override Widget build(BuildContext context) { return new Center( child: new CustomButton("Custom Button"), ); } }
二.通過自定義CustomPainter實(shí)現(xiàn)widgets
1.CustomPainter主要屬性介紹,和Android開發(fā)中的自定義View類似,F(xiàn)lutter中的繪制也是依靠Canvas和Paint來實(shí)現(xiàn)的
1).Canvas //畫布,為開發(fā)者提供了點(diǎn)、線、矩形、圓形、嵌套矩形等繪制方法。
2).Paint //畫筆,可以設(shè)置抗鋸齒,畫筆顏色,粗細(xì),填充模式等屬性,繪制時(shí)可以定義多個(gè)畫筆以滿足不同的繪制需求。eg:
Paint _paint = new Paint() ..color = Colors.red // 畫筆顏色 ..strokeCap = StrokeCap.round //畫筆筆觸類型,包括(1.round-畫筆筆觸呈半圓形輪廓開始和結(jié)束;2.butt-筆觸開始和結(jié)束邊緣平坦,沒有外延;3.square-筆觸開始和結(jié)束邊緣平坦,向外延伸長度為畫筆寬度的一半) ..isAntiAlias = true //是否啟動抗鋸齒 ..style=PaintingStyle.fill //繪畫風(fēng)格,默認(rèn)為填充,有fill和stroke兩種 ..blendMode=BlendMode.exclusion //顏色混合模式 ..colorFilter=ColorFilter.mode(Colors.blueAccent, BlendMode.exclusion)//顏色渲染模式 ..maskFilter=MaskFilter.blur(BlurStyle.inner, 3.0)//模糊遮罩效果 ..filterQuality=FilterQuality.high//顏色渲染模式的質(zhì)量 ..strokeWidth = 15.0;//畫筆的寬度復(fù)制代碼
3).Offset //坐標(biāo),可以用來表示某個(gè)點(diǎn)在畫布中的坐標(biāo)位置。
4).Rect //矩形,在圖形的繪制中,一般都是分區(qū)域繪制的,這個(gè)區(qū)域一般都是一個(gè)矩形,在繪制中通常使用Rect來存儲繪制的位置信息。
5).坐標(biāo)系 //在Flutter中,坐標(biāo)系原點(diǎn)(0,0)位于左上角,X軸向右變大,Y軸向下變大。
2.painting.dart中的主要方法,eg:
void drawRect(Rect rect, Paint paint) {...} //畫矩形 void drawLine(Offset p1, Offset p2, Paint paint) {...} //畫線 void drawPoints(PointMode pointMode, List<Offset> points, Paint paint) {...} //畫點(diǎn) void drawCircle(Offset c, double radius, Paint paint) {...} //畫圓 void drawArc(Rect rect, double startAngle, double sweepAngle, bool useCenter, Paint paint) {...} //畫圓弧
三.餅狀圖piechart.dart代碼展示
import 'dart:math'; import 'package:flutter/material.dart'; class PieChartTest extends StatelessWidget{ const PieChartTest({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('pie chart'), ), body:Container( alignment: Alignment.center, child: CustomPaint( size: const Size(300, 300), painter: PieChartPainter(), ), ) ); } } class PieChartPainter extends CustomPainter{ Paint getColoredPaint(Color color){ Paint paint=Paint(); paint.color=color; return paint; } @override void paint(Canvas canvas, Size size) { double wheelSize=min(size.width, size.height)/2; double nbElem=8; double radius=(2*pi)/nbElem; Rect boundingRect=Rect.fromCircle(center: Offset(wheelSize,wheelSize), radius: wheelSize); canvas.drawArc(boundingRect, 0, radius, true, getColoredPaint(Colors.orange)); canvas.drawArc(boundingRect, radius, radius, true, getColoredPaint(Colors.black)); canvas.drawArc(boundingRect, radius*2, radius, true, getColoredPaint(Colors.green)); canvas.drawArc(boundingRect, radius*3, radius, true, getColoredPaint(Colors.red)); canvas.drawArc(boundingRect, radius*4, radius, true, getColoredPaint(Colors.blue)); canvas.drawArc(boundingRect, radius*5, radius, true, getColoredPaint(Colors.yellow)); canvas.drawArc(boundingRect, radius*6, radius, true, getColoredPaint(Colors.purple)); canvas.drawArc(boundingRect, radius*7, radius, true, getColoredPaint(Colors.white)); } @override bool shouldRepaint(covariant CustomPainter oldDelegate)=>oldDelegate!=this; }
四.實(shí)際效果圖,eg:
附:Flutter中父widget調(diào)用子widget的方法
一、定義globalKey,注意<>中的是State類。
final _childWidgetKey = GlobalKey();
二、在父頁面初始化子widget
ChildPage(key:_receiveKey),
三、
class ChildPage extends StatefulWidget {undefined ChildPage({Key key}) : super(key: key); ???????@override ChildPageState createState() => ChildPageState(); }
四、在父界面調(diào)用子widget中的方法
_childWidgetKey.currentState.onRefresh();
總結(jié)
到此這篇關(guān)于Flutter構(gòu)建自定義Widgets的文章就介紹到這了,更多相關(guān)Flutter構(gòu)建自定義Widgets內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Android自定義View實(shí)現(xiàn)隨手勢滑動控件
這篇文章主要為大家詳細(xì)介紹了Android自定義View實(shí)現(xiàn)隨手勢滑動的控件,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02RecyclerView實(shí)現(xiàn)縱向和橫向滾動
這篇文章主要為大家詳細(xì)介紹了RecyclerView實(shí)現(xiàn)縱向和橫向滾動,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-01-01flutter實(shí)現(xiàn)底部導(dǎo)航欄
這篇文章主要為大家詳細(xì)介紹了flutter實(shí)現(xiàn)底部導(dǎo)航欄,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03RecycleView實(shí)現(xiàn)item側(cè)滑刪除與拖拽
這篇文章主要為大家詳細(xì)介紹了RecycleView實(shí)現(xiàn)item側(cè)滑刪除與拖拽,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11Flutter輸入框TextField屬性及監(jiān)聽事件介紹
這篇文章主要介紹了Flutter輸入框TextField屬性及監(jiān)聽事件介紹,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2021-11-11WebView的介紹與簡單實(shí)現(xiàn)Android和H5互調(diào)的方法
這篇文章主要給大家介紹了關(guān)于WebView與簡單實(shí)現(xiàn)Android和H5互調(diào)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-05-05Android ScrollView的頂部下拉和底部上拉回彈效果
本篇文章主要介紹了Android ScrollView的頂部下拉和底部上拉回彈效果,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05