Flutter構(gòu)建自定義Widgets的全過程記錄
一.組合widget實現(xiàn)
1.android和flutter自定義控件對比
Android中，一般會繼承View或已經(jīng)存在的某個控件，然后覆蓋draw方法來實現(xiàn)自定義View。在Flutter中，一個自定義widget通常是通過組合其它widget來實現(xiàn)的，而不是繼承。下面看看如何構(gòu)建持有一個label的CustomButton。這是通過將Text與RaisedButton組合來實現(xiàn)的，而不是繼承RaisedButton并重寫其繪制方法實現(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)實，eg :
@override
Widget build(BuildContext context) {
return new Center(
child: new CustomButton("Custom Button"),
);
}
}
二.通過自定義CustomPainter實現(xiàn)widgets
1.CustomPainter主要屬性介紹，和Android開發(fā)中的自定義View類似，F(xiàn)lutter中的繪制也是依靠Canvas和Paint來實現(xiàn)的
1).Canvas //畫布，為開發(fā)者提供了點、線、矩形、圓形、嵌套矩形等繪制方法。
2).Paint //畫筆，可以設(shè)置抗鋸齒，畫筆顏色，粗細(xì)，填充模式等屬性，繪制時可以定義多個畫筆以滿足不同的繪制需求。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)，可以用來表示某個點在畫布中的坐標(biāo)位置。
4).Rect //矩形，在圖形的繪制中，一般都是分區(qū)域繪制的，這個區(qū)域一般都是一個矩形，在繪制中通常使用Rect來存儲繪制的位置信息。
5).坐標(biāo)系 //在Flutter中，坐標(biāo)系原點(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) {...} //畫點
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;
}
四.實際效果圖,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加載圖片內(nèi)存溢出問題解決方法,本文講解使用BitmapFactory.Options解決內(nèi)存溢出問題,需要的朋友可以參考下2015-06-06
Android TabHost如何實現(xiàn)頂部選項卡
這篇文章主要介紹了Android TabHost如何實現(xiàn)頂部選項卡,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-09-09
android控件Banner實現(xiàn)簡單輪播圖效果
這篇文章主要為大家詳細(xì)介紹了android控件Banner實現(xiàn)簡單輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
APP添加CNZZ統(tǒng)計插件教程 Android版添加phonegap
這篇文章主要介紹了APP添加CNZZ統(tǒng)計插件教程，Android版添加phonegap，感興趣的小伙伴們可以參考一下2015-12-12
本篇文章主要介紹了Android操作Excel文件的功能實現(xiàn)，Android中操作Excel文件導(dǎo)出報表時主要采用開源庫jxl，有興趣的可以了解一下。2017-03-03
這篇文章主要為大家詳細(xì)介紹了Android限時搶購倒計時的實現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要為大家詳細(xì)介紹了Android-仿一號店貨物詳情輪播圖動畫效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
Android 仿京東商城底部布局的選擇效果(Selector 選擇器的實現(xiàn))
這篇文章主要介紹了Android 仿京東商城底部布局的選擇效果(Selector 選擇器的實現(xiàn)),需要的朋友可以參考下2017-04-04
Android實現(xiàn)分享微信好友及出現(xiàn)閃退的解決辦法
這篇文章主要介紹了Android實現(xiàn)分享微信好友及出現(xiàn)閃退的解決辦法的相關(guān)資料,需要的朋友可以參考下2016-03-03
這篇文章主要為大家詳細(xì)介紹了Android實現(xiàn)簡單動態(tài)搜索功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05