Flutter自定義Widget和使用方法

前言

前面已經通過三個篇幅向大家介紹了Flutter原生提供的常用Widget和其使用方法，實際開發中我們會遇到一些特殊的需求或者規範一些常用的Widget作為基礎UI元件來使用，這時我們就需要根據需求自定義Widget了。Flutter中的自定義Widget和安卓、iOS原生平臺類似，可以使用現有Widget進行組合，也可以自己根據需求來繪製，下面分別對兩種自定義Widget的實現和使用方法做詳細介紹。

現有Widget組合自定義Widget

現有Widget組合即是根據前面所介紹的基礎Widget根據需求來組合成一個通用的Widget，這樣在使用過程中避免設定過多的屬性，且增強其複用性。 比如，在實際開發中，我們經常會碰到一個Icon和一個標題組合而成的UI，且這個組合的區塊可以處理點選事件，那麼我們就可以根據現有Icon和Text widget組合成通用的類似UI元件。

首先建立一個單獨的dart檔案來實現該自定義Widget，比如命名為custom_combined_widget.dart。

import 'package:flutter/material.dart';

class CustomCombinedWidget extends StatefulWidget {

  final IconData iconData;
  final String title;
  final GestureTapCallback onTap;

  const CustomCombinedWidget({Key key, this.iconData, this.title, this.onTap}): super(key: key);

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return CustomCombinedWidgetState();
  }

}

class CustomCombinedWidgetState extends State<CustomCombinedWidget> {

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return GestureDetector(
      onTap: this.widget.onTap,
      child: Column(
        children: <Widget>[
          Icon(this.widget.iconData, size: 45.0,),
          Text(this.widget.title == null ? "" : this.widget.title, style: TextStyle(fontSize: 14.0, color: Colors.black),),
        ],
      ),
    );
  }

}
複製程式碼

上述程式碼中我們自定義了一個CustomCombinedWidget，這裡面Icon的大小和標題的文字大小、顏色都是定好的，所以在使用時無法改變這些值，如果想在使用過程中改變這些值則需要從外部傳值進來，比如標題的文字內容、icon和該Widget點選事件回撥就是通過外部使用者傳入的。

以上自定義Widget的使用方法如下：

//首先匯入自定義Widget所在檔案
import 'package:demo_module/custom_combined_widget.dart';

//在頁面Widget中使用

class HomePageState extends State<HomePage> {
  String tips = '這裡是提示';

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('自定義組合Widget'),
      ),
      body: Container(
        child: buildCombinedWidget(),
      ),
    );
  }

  Widget buildCombinedWidget() {
    return Center(
      child: Column(
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              CustomCombinedWidget( //使用自定義Widget
                iconData: Icons.home,
                title: '首頁',
                onTap: () {
                  setState(() {
                    this.tips = '點選了首頁';
                  });
                },
              ),
              CustomCombinedWidget(
                iconData: Icons.list,
                title: '產品',
                onTap: () {
                  setState(() {
                    this.tips = '點選了產品';
                  });
                },
              ),
              CustomCombinedWidget(
                iconData: Icons.more_horiz,
                title: '更多',
                onTap: () {
                  setState(() {
                    this.tips = '點選了更多';
                  });
                },
              ),
            ],
          ),
          Padding(
            padding: EdgeInsets.only(top: 50),
            child: Text(
              this.tips,
              style: TextStyle(fontSize: 20, color: Colors.blue),
            ),
          ),
        ],
      ),
    );
  }
} 
複製程式碼

以上程式碼模擬器執行效果如下：

通過CustomPainter繪製自定義Widget

自定義繪製的Widget需要我們繼承官方提供的CustomPainter抽象類，重寫paint方法來實現，我們可以在paint方法中根據需求來繪製各種UI圖形，最後根據該自定義CustomerPainter類建立一個painter物件作為系統提供的CustomPaint的painter屬性值來實現自定義Widget。下面根據一個常用的柱狀圖的實現來學習CustomPainter的用法。

首先我們建立一個自定義Widget對應的dart檔案my_custom_painter.dart

import 'dart:ui';
import 'dart:ui' as ui show TextStyle;

import 'package:flutter/material.dart';

class BaseData {
  String name;
  int num;
  BaseData({this.name, this.num});
}

class MyCustomPainter extends CustomPainter {
  //繪製區域寬度
  final int width = 300;
  //繪製區域高度
  final int height = 350;
  //座標原點
  final Offset origin = const Offset(50.0, 280.0);
  //縱座標頂點
  final Offset vertexVer = const Offset(50.0, 20.0);
  //橫座標頂點
  final Offset vertexHor = const Offset(300.0, 280.0);
  //縱座標刻度間隔
  final int scaleInterval = 1000;
  const MyCustomPainter(this.data);
  final List<BaseData> data;

  //根據文字內容和字型大小等構建一段文字
  Paragraph buildParagraph(String text, double textSize, double constWidth) {
    ParagraphBuilder builder = ParagraphBuilder(
      ParagraphStyle(
        textAlign: TextAlign.right,
        fontSize: textSize,
        fontWeight: FontWeight.normal,
      ),
    );
    builder.pushStyle(ui.TextStyle(color: Colors.black));
    builder.addText(text);
    ParagraphConstraints constraints = ParagraphConstraints(width: constWidth);
    return builder.build()..layout(constraints);
  }

  @override
  void paint(Canvas canvas, Size size) {
    // TODO: implement paint
    var paint = Paint()
      ..color = Colors.black
      ..strokeWidth = 2.0
      ..strokeCap = StrokeCap.square;

    //繪製縱座標軸線
    canvas.drawLine(origin, vertexVer, paint);
    canvas.drawLine(
        vertexVer, Offset(vertexVer.dx - 5, vertexVer.dy + 10), paint);
    canvas.drawLine(
        vertexVer, Offset(vertexVer.dx + 5, vertexVer.dy + 10), paint);
    canvas.drawParagraph(buildParagraph('印刷量', 14, origin.dx-5),
        Offset(0, vertexVer.dy-8));

    //繪製橫座標軸線
    canvas.drawLine(origin, vertexHor, paint);
    canvas.drawLine(
        vertexHor, Offset(vertexHor.dx - 10, vertexHor.dy - 5), paint);
    canvas.drawLine(
        vertexHor, Offset(vertexHor.dx - 10, vertexHor.dy + 5), paint);
    canvas.drawParagraph(buildParagraph('書籍名', 14, origin.dx-5),
        Offset(vertexHor.dx, origin.dy+8));

    //繪製縱座標刻度
    //實際最大值
    double realMaxY = origin.dy - vertexVer.dy - 20;
    //刻度間隔實際值
    double scaleInte = realMaxY / 5;
    for (int i = 0; i < 5; i++) {
      canvas.drawLine(Offset(origin.dx, origin.dy - (i + 1) * scaleInte),
          Offset(origin.dx + 5, origin.dy - (i + 1) * scaleInte), paint);
      canvas.drawParagraph(buildParagraph(((i+1)*scaleInterval).toString(), 12, origin.dx-5),
          Offset(0, origin.dy - (i + 1) * scaleInte - 8.0));
    }

    if (data == null || data.length == 0) {
      return;
    }
    //計算縱座標上的刻度
    int size = data.length;
    //柱狀圖間隔值
    double horiScalInte = (vertexHor.dx - origin.dx - 20) / size;
    //柱狀圖寬
    double chartWidth = 5;
    for (int i = 0; i < size; i++) {
      BaseData curData = data[i];
      double valueY = curData.num * scaleInte / scaleInterval;
      canvas.drawRect(Rect.fromLTWH(origin.dx + (i+1)*horiScalInte, origin.dy - valueY, chartWidth, valueY), paint);
      canvas.drawParagraph(buildParagraph(curData.name, 12, origin.dx-5),
          Offset(origin.dx + (i+1) * horiScalInte - 25, origin.dy+8));
    }
  }

  @override
  bool shouldRepaint(MyCustomPainter oldDelegate) {
    // TODO: implement shouldRepaint
    return oldDelegate.data != data;
  }
}
複製程式碼

程式碼實現中表示我們將傳入一個包含柱狀圖資料的data物件，paint方法會根據data資料集合來在一個座標系中繪製柱狀圖。在具體的Widget頁面應用方法如下：

class HomePageState extends State<HomePage> {
  List<BaseData> data = List();

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('自定義繪製Widget'),
      ),
      body: Container(
        child: buildDemoPaintWidget(),
      ),
    );
  }

  Widget buildDemoPaintWidget() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Container(
          height: 350,
          child: buildPaintWidget(),
        ),
        Container(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              MaterialButton(
                onPressed: () {
                  BaseData book1 = BaseData(name: '書籍A', num: 5000);
                  BaseData book2 = BaseData(name: '書籍B', num: 2000);
                  BaseData book3 = BaseData(name: '書籍C', num: 3000);
                  List<BaseData> dataList = List();
                  dataList.add(book1);
                  dataList.add(book2);
                  dataList.add(book3);
                  setState(() {
                    this.data = dataList;
                  });
                },
                child: Text('三本書'),
              ),
              MaterialButton(
                onPressed: () {
                  BaseData book4 = BaseData(name: '書籍D', num: 4500);
                  setState(() {
                    this.data.add(book4);
                  });
                },
                child: Text('四本書'),
              ),
              MaterialButton(
                onPressed: () {
                  BaseData book5 = BaseData(name: '書籍E', num: 2500);
                  setState(() {
                    this.data.add(book5);
                  });
                },
                child: Text('五本書'),
              ),
            ],
          ),
        ),
      ],
    );
  }

  //構建自定義繪製的Widget
  Widget buildPaintWidget() {
    return CustomPaint(
      painter: MyCustomPainter(data),
    );
  }
}
複製程式碼

以上程式碼，初始時data資料為空，通過點選三個按鈕來改變data的值從而重新繪製柱狀圖，具體效果如下：

總結

本篇我們對自定義Widget進行了詳細介紹，實際開發中無非就是使用者兩種方式來實現五花八門的UI需求，其中繪製自定義Widget在圖表較多的APP中會經常使用，後續我們會專門用一篇文章來介紹各種圖形的繪製方法，敬請期待！

說明：

文章轉載自對應的“Flutter程式設計指南”微信公眾號，更多Flutter相關技術文章開啟微信掃描二維碼關注微信公眾號獲取。