Flutter学习笔记（38）

Flutter中的自定义控件其实和Android中的很类似，都有组合控件、自绘控件。组合控件就是将通用的控件封装起来，其内部由多个小控件组合起来实现的，比如说公用的title栏，其实和我们平时写页面的时候没什么区别。自绘控件就是继承RenderObjectWidget，然后通过提供给我们的Paint和Canves进行布局和绘制。今天就写一下组合控件实现的思路和具体做法。

如需转载，请注明出处：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 = 0; _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 += 1;     });     }),    Text(    _startCount.toString(),    style: TextStyle(fontSize: 25, color: Colors.red),    )   ],   ),  ),  ), ); }}

在使用的地方进行调用

 @override Widget build(BuildContext context) { return Scaffold(  appBar: AppBar(title: Text(widget.title)),  body: CombinationWidget(Colors.blue,200.0,200.0) ); }

 

传入必要的参数就可以了！再看下效果图

以上！有任何疑问欢迎留言！

 

Flutter学习笔记（38）