如需转载,请注明出处:Flutter学习笔记(38)--自定义控件之组合控件
在开始之前想先写点其他的,emm...就是今天在学习到自定义控件的时候,由于自定义控件这块一直是我的短板,无论是Android原生开发还是Flutter,对我来说都是致命伤,内心深处不知道为什么就是很抵触...学着学着就突然感觉特烦躁,
不知道自己现在学这些有什么用,有什么意义,工作中的项目也用不上,年前换工作的时候,去快手面过Flutter的岗位,很遗憾二面没有通过,我自己也不死心,想好好准备准备再去试一下,也算是自己的一个小目标吧。
梦想总是要有的,万一不小心实现了呢!随便发几句牢骚,平复下心情,革命尚未成功,同志仍需努力!按照计划一步一步来吧!
----------------------------------------------------------正文-------------------------------------------------------------
Flutter中的自定义控件其实和Android中的很类似,都有组合控件、自绘控件。
组合控件就是将通用的控件封装起来,其内部由多个小控件组合起来实现的,比如说公用的title栏,其实和我们平时写页面的时候没什么区别。
自绘控件就是继承RenderObjectWidget,然后通过提供给我们的Paint和Canves进行布局和绘制。今天就写一下组合控件实现的思路和具体做法。
- 组合控件通常是封装一些多页面可公用的控件,这样方便调用,不用重复的造轮子,而且更好维护和管理。
- Flutter中一切皆组件,而组件又分有状态组件和无状态组件,所以,我们在自定义控件的时候,就要想清楚我们要定义的这个组件是有状态的还是无状态的,定好大前提。
- 自定义组件的输入参数是否需要默认值,是否必须输入(用@require修饰)。
- 如果是有状态组件,通过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 StatecreateState() { 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: [ 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) ); }
传入必要的参数就可以了!再看下效果图
以上!有任何疑问欢迎留言!