Flutter構建自定義Widgets的全過程記錄

Posted on by

一.組合widget實現

1.android和flutter自定義控件對比

Android中，一般會繼承View或已經存在的某個控件，然後覆蓋draw方法來實現自定義View。在Flutter中，一個自定義widget通常是通過組合其它widget來實現的，而不是繼承。下面看看如何構建持有一個label的CustomButton。這是通過將Text與RaisedButton組合來實現的，而不是繼承RaisedButton並重寫其繪制方法實現，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,
      )
    );
  }
 
}

上面定義好組件之後，可直接在調用build的方法中現實，eg :

@override
  Widget build(BuildContext context) {
    return new Center(
      child: new CustomButton("Custom Button"),
    );
  }
}

二.通過自定義CustomPainter實現widgets

1.CustomPainter主要屬性介紹，和Android開發中的自定義View類似，Flutter中的繪制也是依靠Canvas和Paint來實現的

1).Canvas //畫佈，為開發者提供瞭點、線、矩形、圓形、嵌套矩形等繪制方法。

2).Paint //畫筆，可以設置抗鋸齒，畫筆顏色，粗細，填充模式等屬性，繪制時可以定義多個畫筆以滿足不同的繪制需求。eg:

Paint _paint = new Paint()
..color = Colors.red // 畫筆顏色 
..strokeCap = StrokeCap.round //畫筆筆觸類型,包括(1.round-畫筆筆觸呈半圓形輪廓開始和結束;2.butt-筆觸開始和結束邊緣平坦，沒有外延;3.square-筆觸開始和結束邊緣平坦,向外延伸長度為畫筆寬度的一半)
..isAntiAlias = true //是否啟動抗鋸齒
..style=PaintingStyle.fill //繪畫風格，默認為填充，有fill和stroke兩種
..blendMode=BlendMode.exclusion //顏色混合模式
..colorFilter=ColorFilter.mode(Colors.blueAccent, BlendMode.exclusion)//顏色渲染模式
..maskFilter=MaskFilter.blur(BlurStyle.inner, 3.0)//模糊遮罩效果
..filterQuality=FilterQuality.high//顏色渲染模式的質量
..strokeWidth = 15.0;//畫筆的寬度復制代碼

3).Offset //坐標，可以用來表示某個點在畫佈中的坐標位置。

4).Rect //矩形，在圖形的繪制中，一般都是分區域繪制的，這個區域一般都是一個矩形，在繪制中通常使用Rect來存儲繪制的位置信息。

5).坐標系 //在Flutter中，坐標系原點(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調用子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();
}

四、在父界面調用子widget中的方法

_childWidgetKey.currentState.onRefresh();

總結

到此這篇關於Flutter構建自定義Widgets的文章就介紹到這瞭,更多相關Flutter構建自定義Widgets內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：