基于Flutter的控件集合

最新推荐文章于 2022-09-22 15:09:32 发布
最新推荐文章于 2022-09-22 15:09:32 发布
阅读量190 收藏
点赞数
文章标签： Futter Dart
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36283738/article/details/103020386
版权

基于Flutter的控件集合

先上一些效果图吧！

主页面
在这里插入图片描述

可展开的ExpanedList
在这里插入图片描述

加载控件Loading
在这里插入图片描述

搜索栏
在这里插入图片描述

弹窗
在这里插入图片描述

文字排版
在这里插入图片描述

Tab栏
在这里插入图片描述

输入框
在这里插入图片描述

控件
在这里插入图片描述

上面罗列了一些实现的效果图，这里就不放代码了。接下来说明一些Flutter的知识点和一些在编程上需要注意的点。

Q：弹框内嵌套单选按钮、复选框等具有状态变化的控件点击时不响应的问题。
A：在AlertDialog的content属性中使用StatefulBuilder()创建能够进行状态更新的内容。

Q：Column容器排版时溢出问题。
A：用Column排版时，若内容的大小超过屏幕显示的高度，会造成溢出，可以使用ListView和CustomScrollView进行代替。

Q：debug版本和release版本性能差异问题。
A：Debug称为调试版本，它包含很多调试信息和程序信息，并且不作任何优化，便于程序员调试程序。Release称为发布版本，它往往是进行了各种优化，不包含任何调试信息，使得程序在代码大小和运行速度上都是最优的，以便用户很好地使用。

Q：view的问题。
A：Flutter没有View，与之对应的是Widget，并且分为StatelessWidgets与StatefulWidgets，前者是个静态View，后者是动态通过Data来更新的View。

Q：Flutter有无定义布局的XML文件？
A：Flutter没有xml，并且是通过Widgets的嵌套来实现一个布局的，可以说在Flutter中一切均为Widgets。在Flutter中，UI和事务处理逻辑均写在dart文件中，所以在编写UI代码时，应使用合理的布局和容器减少嵌套层数，增加代码的可读性。

Q：页面跳转问题。
A：Flutter中的页面跳转是使用Navigator与Routes来实现的，实际上是整个Widgets的替换。

Q：Fragment与Activity的问题。
A：MaterialApp类似于Android中的Activity，可以指定theme、title以及子Widgets(Home)，还有更重要的页面跳转routes。Scaffold类似于Fragment，中文意思是脚手架, 它包含一个appBar与一个body，appBar可以指定title与actions (类似于button的点击事件)。

Q：有无Canvas?
A：CustomPaint作为Flutter中“画笔”，同时属于一个Widget，实际绘制是通过属性中的 Painter 来完成的。Painter是CustomPainter抽象类的实例，而CustomPainter的抽象方法也类似于Android中的onDraw()。

Q：Flutter的异步处理。
A：Flutter是一个单线程模式，无法做很长的阻塞操作，只是通过模拟来构建简单的异步，通过关键字await + async来处理。

Q：Flutter中怎么处理Gesture？
A：Flutter提供了GestureDetector，它相当于一个Container，将我们期望接收手势的Widgets放进去, 再实现事件回调就行了。

Q：Flutter中设置尺寸时是否需要设置dp、sp等单位？
A：在Flutter中，我们设置尺寸的时候都是double型的数值，不能设置单位，这是因为flutter默认是使用logical pixel逻辑像素的，系统拿到我们设置的值，会自动判断在iOS或者Android上对应的尺寸，不用我们强制转换成某一个单位。

Flutter控件的实现还是挺容易上手的，实现起来的代码也比Android上要简单一些，不过对于Flutter和Dart语言没有基础的同学，需要先查阅Flutter的官方文档自学一些Flutter的知识和Dart语法。这里提供一些学习的网站：

Flutter开发文档
https://flutter-io.cn

Flutter Widgets目录
https://flutterchina.club/widgets/

Android与Flutter集成
https://juejin.im/post/5c74dbeee51d45708f2a20c6

Flutter中调用安卓原生代码
https://www.jianshu.com/p/406fe6c1edcb

Flutter布局详解
https://www.imooc.com/article/details/id/31493

Flutter线程和异步教程
http://www.imooc.com/article/283287

这个项目也还有很多需要完善的地方，欢迎大佬们提出意见，也希望这篇博客对大家有所帮助，谢谢。

项目的源码可以到此查看
https://github.com/Zero-zhangzehua/FlutterDemo

小张学长爱练腿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Flutter 仿微信右上角弹窗pop menus
wahkim的博客
11-22 953
仿微信右上角pop
Flutter自定义控件之图片裁剪框
01-10
Flutter自定义控件之图片裁剪框
Flutter实现类似Android中的PopupWindow控件
小久久的博客
06-29 8567
最近在网上看到一段话。产品有三宝-弹窗，浮层加引导，设计有三宝-透明，阴影加圆角，运营有三宝-短信，push加红包。在日常开发中经常会遇到弹窗、浮层之类的效果，这些在Android中实现很简单，可以用PopupWindow完成。但是在flutter中怎么做呢，起初我是用flutter中的PopupMenuItem来做，但是这种效果体验特差，不能自定义内容、不能自定义位置，所以放弃了该方案。于是我看...
flutter控件之弹出菜单PopupmenuButton控件
chunchun1230的博客
09-07 2万+
PopupMenuButton控件即弹出菜单控件，点击控件会出现菜单。 import 'package:flutter/material.dart'; class MenusDemo extends StatefulWidget{ @override _MenusDemoState createState() => new _MenusDemoState(); } class _...
Flutter控件
chenyiluo94的博客
06-22 1029
2.图片 （1）Icon:系统自带图标 （2）本地图片 Image.asset() AssetImage （3）网络图片 Image.network() NetworkImage （4）Alignment设置图片位置 （5）BoxFit设置大小和图片不吻合时 3.按钮(xxButton) （1）普通按钮 常用的普通按钮：常用属性: （2）下拉菜单按钮 DropdownButtonFloatingActionButtonFloatActionButton
Flutter常用控件
ioccc785的博客
09-08 1316
Flutter常用控件 1.富文本控件 class richText extends StatelessWidget { const richText({ Key? key, }) : super(key: key); @override Widget build(BuildContext context) { return Text.rich(TextSpan( children: [ TextSpan( text: "hello world"
material风格的Flutter控件
08-10
material风格的Flutter 控件
flutter开源集合.zip
05-18
各种组件+插件+开源App等集合（UI+日历+图片+地图+图表+导航+验证+文字和富文本+ 分析、流量统计+自动构建+风格样式+音频+音频+语音+存储+获利+模板+插件+设备+ 扫码器+蓝牙 / NFC / 信号灯+存储+服务+框架+Redux / ...
基于Flutter构建的新闻App
最新发布
12-31
基于Flutter构建了一个简单的新闻App，利用几个常用的Widget进行开发：热门新闻列表、分类新闻列表、收藏与删除收藏功能。
Flutter控件——常用控件：ListView
wzj_what_why_how的博客
06-15 703
ListView
flutter 常用组件 控件
XixiziMeng的博客
09-22 642
flutter 常用控件
Flutter 学习知识点累积
parade岁月的博客
07-12 226
flutter中的单位：字体默认是sp，其他默认是dp Flutter中如何开启界面绘制边界线 Flutter Provider的使用 AndroidStudio中Flutter打包APK
flutter 各个组件讲解使用集合-推荐地址
zhaojianand的专栏
06-12 688
Dart 的基础概念和数据类型:https://segmentfault.com/a/1190000015719209 Flutter入门 -- Text：https://www.jianshu.com/p/4a267f0e84af Flutter入门 -- ThemeData：https://www.jianshu.com/p/e9d0bd2747ce Flutter入门--Scaffo...
flutter常用插件集合
波~的博客
12-18 809
flutter常用插件集合 alibaba/flutter_boost：路由 install_plugin 2.0.0#app下载更新插件 audio_recorder: any #录音、播放 flutter_sound: ^1.1.5#录音 dropdown_menu: ^1.1.0#下拉菜单 simple_permissions:#权限获取 easy_alert:#弹框 amap_locat...
《Flutter 控件大全》第五十二个：Hero
老孟Flutter
04-04 657
如果你对Flutter还有疑问或者技术方面的疑惑，欢迎加入Flutter交流群（微信：laomengit）。 同时也欢迎关注我的Flutter公众号【老孟程序员】，公众号首发Flutter的相关内容。 Flutter地址：http://laomengit.com 里面包含160多个组件的详细用法。 Hero是我们常用的过渡动画，当用户点击一张图片，切换到另一个页面时，这个页面也有此图，那么...
Flutter 所有UI控件使用教程
热门推荐
z979451341的博客
06-14 3万+
本篇博客将把Flutter所有UI控件的使用方法写出，我学习Flutter是通过Flutter官网来学习的，不需要科学上网，比如这这个网址说的就是Flutter的UI控件的使用方法  https://flutter.io/widgets/widgetindex/   1.基础控件   首先说一下最基础的控件有哪些，基础使用方法 文字显示 new Text('Hello World',...
flutter常见控件及例子
ChenyiMX的博客
02-22 1238
贝塞尔曲线 class BottomClipper extends CustomClipper<Path>{//切割类继承 @override Path getClip(Size size) {//必备属性一 var path = Path(); path.lineTo(0, 0); path.lineTo(0, size.height-60); ...
Flutter 各个组件讲解使用集合-推荐地址
hzqit520的博客
09-22 293
Dart 的基础概念和数据类型:https://segmentfault.com/a/1190000015719209 Flutter入门 -- Text：https://www.jianshu.com/p/4a267f0e84af Flutter入门 -- ThemeData：https://www.jianshu.com/p/e9d0bd2747ce Flutter入门--Scaffold：https://www.jianshu.com/p/4ad3ed402aec Flutter入门--Ma.
flutter 应用集合
08-06
Flutter 应用集合是指由不同的开发者或团队开发的一系列基于 Flutter 框架构建的应用程序的集合。这些应用程序可以是各种各样的，包括但不限于社交媒体应用、电子商务应用、新闻阅读应用、音乐播放器、游戏等等。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值