Flutter小部件之图片(Image)和图标(Icon)

html-css013

Flutter小部件之图片(Image)和图标(Icon),第1张

在Flutter中,我们可以使用Image控件来显示图片,一般来讲我们的图片资源都来源于网络或者本地图片。

Flutter中的Image也是类似。

我们先来看看Image的构造方法

下面我们来看看其常用的属性

可以看到,其常用属性跟前端中的css很像。

下面我们来简单用一用Image控件

首先是必填参数image,它接收一个ImageProvider类型的值。ImageProvider是一个抽象类,他下面有下图这些实现类,由下面这些实现类可以看出,image是可以从资源,内存,网络,和文件中获取图片。

我们先来试试加载网络图片

首先看看NetworkImage构造方法,很简单,传个url就可以了

如下:

嗯,就是这么简单。其他3种情况使用也是类似的,自行看源码即可。

实际上,Flutter给我们提供了扩展方法,使用起来更加简单,通常我们直接使用提供的扩展方法即可

如下

可以看到,他们的构造方法基本类似。

所以我们也可以这样写,跟上面的效果是一致的。

大致分为一下几步

1.创建一个文件夹,用于存放图片,如图,我创建了一个imgs的文件夹,放了一张图片

2.在pubspec.yaml中声明资源,注意声明的时候路径和前面的-是有间隔的,不然的话会报#/properties/flutter/properties/assets: type: wanted [array] got -imgs/code.png

类似的错误,声明完成后点击右上方的packages get

下面我们再来看看其他属性。

width,height

宽高没什么好说的,就是设置宽度和高度

配合color使用,用于设置颜色的混合模式。BlendMode是一个枚举,他有很多值

详细解析还是看官方文档吧,值太多了,我们随便用用

用于设置图片的填充方式,当图片本身小于设置的宽高或者比父控件的宽高小时,我们可以设置该属性控制图片的显示。

其值的类型是BoxFit。是个枚举

具体含义还是直接看文档即可

设置图片的对齐方式,接收一个Alignment类型的值,值如下,很好理解

为了方便看效果我们在外边套了个Container,简单的把它理解为一个容器布局就可以了,类似于html中的div或android中的Layout,我们给Container设置了宽高和背景颜色。

bottomLeft效果如下,其他的自行尝试

相对于Image,ICON可以像web一样使用字体图标,并且可以使用矢量图,无需担心失真的问题,并且体积相对较小。

我们先来看看其构造方法

很简单,我们直接来用一用

默认情况下,pubspec.yaml中uses-material-design的值为true.我们默认就可以使用Material Design字体图标

Flutter和前端一样,采用盒模型。

前端中有用CSS,只用边框实现三角形的案例,这个可以借鉴过来

2018-04-14 借助边框特性实现边框三角形

flutter 中用边框实现三角形

web前端入门到实战:通过CSS边框实现三角形和箭头

编写手机App,用什么语言?

从简单到复杂,可以分三级:

简单方案:HTML5

其实就是把网页封装成App。编程语言就是网页三件套:HTML+CSS+Javascript

有多种工具和框架,如Cordova, uni等等。

这种方式实现“App”最容易,且跨平台,对于iOS和Android做一套就行了。代价是功能弱,性能低,换句话说就是“卡”。

中等方案:原生跨平台框架

这类方案在iOS和Android之上自行实现一套原生框架。通用的Flutter, ReactNative都是流行的原生跨平台框架。适用于 游戏 的Cocos2D,Corona SDK也可以算在这一级里。

这类方案实现App难度中等,因为跨平台,一次开发,iOS和Android都能运行。功能和性能也是中等,比不上原生App,但比HTML5的又好很多。

复杂方案:原生开发

直接在iOS和Android上各自开发一套原生App。

iOS可以使用Objective C或Swift。

Android可以使用Java或Kotlin。

还是来一个图表吧,虽然简单,却很明了:

推荐用Flutter,简单。

以前自己用android原生写过7天酒店签到程序,不过当时的安卓还是比较难写的,不像现在越来越容易上手。

Flutter

Flutter是一个由谷歌开发的开源移动应用软件开发工具包,用于为Android、iOS、 Windows、Mac、Linux、Google Fuchsia开发应用。

Flutter应用是使用Dart语言编写的,虽然是新的一种语言,但是难度不算大,上网搜下相关教程学习下,应该就能很快上手。

Flutter效果

这里是我上个月仿照教程弄的一个简单APP,效果图如下:

点击"Next"就切换下一张,点击"Pre"就切换前一张,点击“Reset”就全部滑落下来。

我女儿最喜欢中间的Reset效果,哈哈。

希望这个答案能帮到你。

现在Flutter正式版已经出来了,原生性能,安卓iOS多平台支持,谷歌大厂背书,大家可以比较放心的学习。编程语言用的是Dart,可以看做是加了语法糖版本的Java,学习起来也比较容易,如果想做手机app,可以考虑使用它。

如果只是自己做着玩的话推荐用H5开发,开发工具HBuilder或者HBuilderX。

先科普下什么是IOS和Android吧。

IOS只是操作系统而已,是苹果的操作系统。

开发IOS上运行的APP的话,现在流行的语言是Object-C和Swift。

Android也是操作系统,是谷歌基于Linux内核开发出来的手机操作系统。

开发Android上运行的APP的话,现在流行的语言我觉得仍然还是JAVA。

如果想要真的做一款APP的话,不仅仅会一门语言就够了,涉及的东西比较多,如下是我给你的学习推荐路线。

学习路线:

1:先学习js,然后学习下html 、css。

学习这些可以上菜鸟教程或者W3School网站学习。

开发工具使用vscode或者Notepad++都可以的。

2:了解Mui常用组件(官网:https://dev.dcloud.net.cn/mui/ui/),

熟悉常用API(官网:http://www.html5plus.org/doc/h5p.html)。

3:服务端的开发,要么用java开发,要么用.net webapi开发,推荐理由,java目前是主流,.net webapi简单容易。

java 开发工具IntelliJ IDEA,.net 开发工具 vs。

4:数据存储使用mysql。

补充说明:如果是想做专业开发APP的话还是建议用java开发客户端,ios APP则用swift开发。

当然现在为了一套代码多个平台,使用H5开发专业APP的也有。

会了就可以正式撸代码实现自己简单的APP了。

回答完毕,谢谢。我是只说代码的大饼。

那当然首选是h5套壳了。关于语言方面,我建议还是用PHP吧。随着进一步学习,可以学习uinapp一键多端。H5、小程序、App、小程序支持多个平台上架、微信抖音支付宝百度,希望可以帮助你

目前有三种app开发方式:原生app、混合app、webapp。

原生app:安卓需要java语言,ios需要 objec t-c,wp需要的.net语言。这种app用户体验最好,性能也是最好的,开发成本高,开发周期长,一款app需要开发多个语言版本;

混合app:需要h5,javascript,了解每个混合框架,比如appcan、hbulider、phonegap等等,以及封装的中间件。这种开发方式的用户体验、性能没有原生的好,但是他的开发周期短,开发成本低,对开发人员技能掌握比较高,开发一套程序可以兼容到多个设备上;

webapp:需要h5、javascript语言,不能调用底层设备,用户体验效果次之,开发简单,开发成本低,开发周期短,可以兼容多个设备。

综上所述三种开发各有优缺点,要根据具体的项目需求来选择适合自己的开发语言和开发场景。

uniapp了解下,多端应用。app的话要考虑安卓和苹果,但学了二种学习成本比较高。用uniapp就解决了。

现在中小型企业都在逐渐采用跨平台开发的模式 效率高 成本低 作为个人更是开发不二的选择 你问的iOS和安卓是原生开发 需要不同的开发语言和框架 学习成本也很高 既然你说你是小白 如果采用原生开发 可能得大概花一年半载才能开始上手

采用跨平台开发 只需要学习一下html css JavaScript 然后选择跨平台开发框架 比如react flutter uniapp 都可以 跨平台就是指你这一套代码编写的app可以到不同平台运行 比如iOS安卓都OK 但其实很多还可以编译到各类小程序平台运行 所以很方便

我这里推荐uniapp 一个基于vue的跨端开发框架 我自己也用这个开发了很多项目 确实很快 也提供了原生渲染能力 不做 游戏 等软件 基本没啥问题 社区插件市场也很热闹 基本有问题可以很快解决 希望可以帮到你。

按照开发方式可分为原生开发、混合开发、webapp开发,不同的开发方式学习的编程语言不一样,下面我们来一个一个分析一下:

一、原生开发

原生开发的编程语言主要为针对IOS运行环境的为编程语言为Swift或Object c,安卓环境为Java或Kotlin,WP环境为NET。原生开发的运行效率最高,用户体验最好,但是需要学习不同平台的编程语言,学习门槛较高。

二、混合开发(伪原生开发)

混合开发技术主要采用一套特别的渲染引擎来渲染UI界面和交互,按照渲染引擎可分为html与dart,其编程语言主要是Javascript或Typescript、Dart。

目前基于html渲染的开发框架有react native、weex、uniapp,基于dart的开发框架只有flutter。

混合开发由于调用了原生的控件来渲染UI,所以加载和体验与原生差不多,学习成本比较低,只要会js,选择一个框架开发就行了,或者学习dart语言,进行flutter开发。

三、webapp开发

webapp开发主要利用原生环境中的浏览器控件来装载服务器上的html页面,实际这个app就是一个自定义的浏览器app,所以只要会html,就会开发webapp,由于app内部加载的是远程的网页,所以加载速度和体验最差。

以上是我个人的总结,有不对的欢迎指出,谢谢。

本人用c#,除了单片机用c,cad CATIA,多媒体主要Adobe,它干完所有,不需要性能的视图混合dom代码。