如需轉載，請註明出處：Flutter學習筆記（38）--自定義控制元件之組合控制元件

在開始之前想先寫點其他的，emm...就是今天在學習到自定義控制元件的時候，由於自定義控制元件這塊一直是我的短板，無論是Android原生開發還是Flutter，對我來說都是致命傷，內心深處不知道為什麼就是很牴觸...學著學著就突然感覺特煩躁，

不知道自己現在學這些有什麼用，有什麼意義，工作中的專案也用不上，年前換工作的時候，去快手面過Flutter的崗位，很遺憾二面沒有通過，我自己也不死心，想好好準備準備再去試一下，也算是自己的一個小目標吧。

夢想總是要有的，萬一不小心實現了呢！隨便發幾句牢騷，平復下心情，革命尚未成功，同志仍需努力！按照計劃一步一步來吧！

----------------------------------------------------------正文-------------------------------------------------------------

Flutter中的自定義控制元件其實和Android中的很類似，都有組合控制元件、自繪控制元件。

組合控制元件就是將通用的控制元件封裝起來，其內部由多個小控制元件組合起來實現的，比如說公用的title欄，其實和我們平時寫頁面的時候沒什麼區別。

自繪控制元件就是繼承RenderObjectWidget，然後通過提供給我們的Paint和Canves進行佈局和繪製。今天就寫一下組合控制元件實現的思路和具體做法。

1. 組合控制元件通常是封裝一些多頁面可公用的控制元件，這樣方便呼叫，不用重複的造輪子，而且更好維護和管理。
2. Flutter中一切皆元件，而元件又分有狀態元件和無狀態元件，所以，我們在自定義控制元件的時候，就要想清楚我們要定義的這個元件是有狀態的還是無狀態的，定好大前提。
3. 自定義元件的輸入引數是否需要預設值，是否必須輸入（用@require修飾）。
4. 如果是有狀態元件，通過setState來更改狀態就好了。

下面我們寫一個例子，就是一個簡單的點贊，Container容器裡面有一個icon一個text，點選icon，數字增加。

import 'package:flutter/material.dart';

class CombinationWidget extends StatefulWidget {
 

  @required

  Color color;

  @required

  double width;

  @required

  double height;

  CombinationWidget(this.color, this.width, this.height);

  @override

  State<StatefulWidget> createState() {

    return _CombinationWidgetState(color, width, height);

  }

}

class _CombinationWidgetState extends State {

  Color _color;

  double _width;

  double _height;

  var _startCount = ;

  _CombinationWidgetState(this._color, this._width, this._height);

  @override

  Widget build(BuildContext context) {

    return Center(

      child: ClipOval(

        child: Container(

          color: _color,

          width: _width,

          height: _height,

          child: Row(

            mainAxisSize: MainAxisSize.max,

            mainAxisAlignment: MainAxisAlignment.center,

            children: <Widget>[

              IconButton(

                  icon: Icon(

                    Icons.thumb_up,

                    color: Colors.white,

                  ),

                  onPressed: () {

                    setState(() {

                      _startCount += ;

                    });

                  }),

              Text(

                _startCount.toString(),

                style: TextStyle(fontSize: , color: Colors.red),

              )

            ],

          ),

        ),

      ),

    );

  }

}

在使用的地方進行呼叫

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(title: Text(widget.title)),

      body: CombinationWidget(Colors.blue,200.0,200.0)

    );

  }

傳入必要的引數就可以了！再看下效果圖

以上！有任何疑問歡迎留言！