Flutter学习笔记(38)--自定义控件之组合控件
2024-09-20 08:59:26
如需转载,请注明出处: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
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)
);
}
传入必要的参数就可以了!再看下效果图
以上!有任何疑问欢迎留言!
最新文章
- PHP用户注册与登录完整代码【4】
- BZOJ1057[ZJOI2007]棋盘制作 [单调栈]
- 2016总结 wjwdive
- CAN总线 SJA1000中断
- android开发之路09(浅谈SQLite数据库01)
- 2013 南京邀请赛 A play the dice 求概率
- 全然符合package.json在CommonJS中的规范
- OpenVPN-ng,为移动续航的应用层隧道
- Linux 下使用网易的SMTP服务器 发送邮件
- hdu_1027(好吧。。。牛。。。next_permutation也可以水过)
- 原生拖拽js利用localstorage保存位置
- Mac终端开启代理
- Windows Server 2008 R2 Enterprise x64 部署 nginx、tomcat、mysql
- LibreOJ一本通题解报告
- java异常,异常处理,异常类 关键字:throws 和 throw 自定义的异常类
- linux 最为常用的命令
- golang:mime.Decode、mime.DecodeHeader
- js 二叉树删除最大值和最小值
- 为solr增加用户验证
- MyEclipse jsp 中文乱码
热门文章
- pandas的loc与iloc
- Node.js躬行记(2)——文件系统和网络
- 北京理工大学复试上机--2001A
- Rocket - debug - Example: DMI
- Rocket - diplomacy - LazyModule实例:Buffer
- 【Linux】ntp服务-时间同步
- 【Linux】CentOS7安装tomcat8.5.45,这方法也太简单了吧!
- 使用turtle库绘制一个红色五角星图形
- Java实现 蓝桥杯 算法训练 找零钱
- Java实现 LeetCode 312 戳气球