重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
打开android-app-src-main- AndroidManifest.xml:
成都创新互联公司是一家专注网站建设、网络营销策划、小程序设计、电子商务建设、网络推广、移动互联开发、研究、服务为一体的技术型公司。公司成立十余年以来,已经为上千余家石牌坊各业的企业公司提供互联网服务。现在,服务的上千余家客户与我们一路同行,见证我们的成长;未来,我们一起分享成功的喜悦。
label和icon属性就是代表App名称和图标,label比较简单,我们随便改就可以了,我们改为“Flutter 实战入门”,icon的值默认是@mipmap/ic_launcher,其中mipmap是Android的一类资源,在android-app-src-main-res下
因此,只需要把我们的icon图片替换原来的ic_launcher.png即可,图片名称要一样。目录中有 mipmap-mdpi 、 mipmap-hdp i、 mipmap-xdpi 、 mipmap-xxdp i、 mipmap-xxxdpi ,这代表不同分辨率的手机加载不同的图片,手机分辨率越高,加载的图标分辨率越高,正常情况下,mipmap-mdpi 放置48 48的图标,mipmap-hdpi存放72 72,mipmap-xdpi存放96 96,mipmap-xxdpi存放144 144,mipmap-xxxdpi存放192*192。
打开ios-Runner-Info.plist 文件,key style="box-sizing: border-box;" CFBundleName/key下面的值代表App的名称,如图
修改App的名称为“Flutter 实战入门”。
打开ios-Runner- Assets.xcassets- AppIcon.appiconset:
我们只需将这个文件夹里的图片替换为我们的图标即可,注意名称和分辨率保持一致。修改后的效果
在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中,并没有统一地修改图标、应用名称和包名的地方,所以要在各自语言对应的地方进行修改:
写法与原生相同,并且可以不一致。
PS:不推荐修改包名,包名最好在项目开始时定下...之后修改可能会出点什么小问题...
其他方式
可以使用Xcode打开ios文件夹下的Runner.xcworkspace项目,像原生项目一样修改。
更新Flutter应用程序启动图标的方式与在本机Android或iOS应用程序中更新启动图标的方式相同。
注意: 如果您重命名.png文件,则必须在您 AndroidManifest.xml 的 application 标签的 android:icon 属性中更新名称。
在 Flutter 框架加载时,Flutter 会使用本地平台机制绘制启动页。此启动页将持续到Flutter渲染应用程序的第一帧时。
Flutter 的图标类,它有几个衍生的组件:ImageIcon、IconButton 等。
Icon还可以架加载iconfont(字体图标),这种方式 和图片相比有如下优势:
使用方法比较简单
为了照顾新手小伙伴,基础讲解里面不会设计比较复杂的东西,后面的深入讲解中再对各方面最深入解析
下一节基础组件之Button
在项目中找到 AndroidManifest.xml 文件,其中 android:label="demo" 就是应用程序名称,修改引号中的内容即可
在项目中找到 mipmap-mdpi mipmap-hdpi mipmap-xhdpi mipmap-xxhdpi mipmap-xxxhdpi 文件夹,替换这些文件夹中的 ic_launcher.png 文件即可
注意:图标有多种尺寸的大小,是为了适配不同分辨率的手机而设计的
在项目中找到 Info.plist 文件,其中 CFBundleDisplayName 和 CFBundleName 下面的就是应用程序名称,修改内容即可
找到项目中的 AppIcon.appiconset 文件夹,其中 Contents.json 是配置文件,其它的图片文件就是图标,替换这些图片文件即可
注意:图标有多种尺寸的大小,是为了适配不同分辨率的手机而设计的
插件地址:
在项目中找到 pubspec.yaml 文件,添加内容如下
插件地址:
在项目中找到 pubspec.yaml 文件,添加内容如下
注意:准备一张 1024x1024 的 png 图片,取名为 icon.png 并把它放在 assets/icon 目录中
找到 ~/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_launcher_icons-0.9.2/lib/android.dart 文件修改内容如下
注意:如果使用了镜像地址就找到 ~flutter/.pub-cache/hosted/pub.flutter-io.cn/flutter_launcher_icons-0.9.2/lib/android.dart 文件来修改以上内容