蟲蟲wap建站源碼windows優(yōu)化大師官方下載
文章目錄
- 概念介紹
- 實現(xiàn)方法
- 示例代碼
我們在上一章回中介紹了跟手指移動的小球相關(guān)的內(nèi)容,本章回中將介紹 自定義組件.閑話休提,讓我們一起Talk Flutter吧。
概念介紹
在項目中有些內(nèi)容無法通過現(xiàn)有的組件來實現(xiàn),因此需要自定義組件,自定義組件通常分為兩大類:
- 組合已經(jīng)有的組件形成新的組件;
- 重新繪制組件;
組合已經(jīng)有的組件我們沒有專門介紹過,不過有類似的內(nèi)容,比如前面章回中實現(xiàn)的陰影就可以看作是通過組合已經(jīng)有的組件形成新的組件,它組合了Text
和BoxShadow
組件,形成了帶陰影的文字組件。我們在本章回中主要介紹的是重新繪制組件。
實現(xiàn)方法
重新繪制組件需要使用兩個組件:CustomPaint
組件和CustomPainter
組件,因此我們首先介紹一下這兩個組件:
- CustomPainte組件相當于是一個畫布,它主要用來創(chuàng)建畫布,它提供了size屬性來控制畫布的大小;
- CustomPainter組件相當于畫筆,組件中需要的內(nèi)容主要通過它來實現(xiàn),它是一個抽象類,我們需要實現(xiàn)它的
Paint
()方法,所有繪制的內(nèi)容都是在這個方法中完成的。 - 繪制組件時創(chuàng)建畫筆對象,并且把它賦值給畫布的painter屬性,這樣就把畫筆和畫布關(guān)聯(lián)在了一起。
示例代碼
CustomPaint(painter: RockerPainter(outerRadius,Colors.blue),size: Size(100,100),
),class RockerPainter extends CustomPainter{///offset表示圓的圓心與(0,0)的偏移距離,其值等于半徑final Color _color;final double radius = size;Offset _offset = Offset.zero;RockerPainter( this.radius,this._color);///參數(shù)中的size就是包含類的CustomPaint中指定的sizevoid paint(Canvas canvas,Size size) {Paint paint = Paint()..color = _color..strokeCap = StrokeCap.round..isAntiAlias = true..strokeWidth = 2.0;///圓的半徑由參數(shù)指定_offset = Offset(radius, radius);///畫圓:第一個參數(shù)指定Offset,表示圓的左上角為基準進行偏移而不是以圓心為基準canvas.drawCircle(_offset,radius,paint);} bool shouldRepaint(covariant CustomPainter oldDelegate) {// TODO: implement shouldRepaintreturn true;}
}
我們在上面的示例代碼中,自定義了個圓形,圓形的大小和顏色可以通過參數(shù)指定。該代碼中結(jié)合了綜合使用了CustomPaint組件和CustomPainter組件。
編譯并且運行上面的程序,可以看到一個半徑為100的藍色圓形,我在這里就演示程序的運行結(jié)果了,建議大家自己動手去實踐。
看官們,與"自定義組件"相關(guān)的內(nèi)容就介紹到這里,歡迎大家在評論區(qū)交流與討論!