Flutter框架【2】
本节我们实现的效果如下图所示
在界面中插入一张图片,并且★按钮可以实现点击效果
所以这里我们要涉及两个知识点:
- 如何在flutter中导入静态资源
- 如何为widget赋予交互效果
一、如何在flutter中导入静态资源
flutter中实现静态资源的显示,比如展示一个图片,需要三步:
- 在工作目录下添加该图片资源
- 在配置文件里面进行声明
- 界面中直接引用
1.在工作目录下添加该图片资源
在工作目录下添加asset
文件夹,在该文件夹下添加图片文件【目录结构如下图所示】:
2. 在配置文件里面进行声明:
3. 界面中直接引用
使用Image
组件,直接使用路径访问对应静态图片资源
new Image(
width:300,
image:AssetImage('images/1.jpg')
)
二、如何为widget赋予交互效果
在上一节【Flutter框架【1】_widget以及简单静态布局】的布局完成后,我们实现的效果是下图所示
在我们插入图片资源后,下一步就要完成★点击的交互效果。
在之前,我们要了解两个概念