Flutter框架【2】引入静态资源以及添加交互事件

Flutter框架【2】

Flutter框架【1】_widget以及简单静态布局

本节我们实现的效果如下图所示
在界面中插入一张图片,并且★按钮可以实现点击效果
所以这里我们要涉及两个知识点:

  1. 如何在flutter中导入静态资源
  2. 如何为widget赋予交互效果

Flutter框架【2】引入静态资源以及添加交互事件_第1张图片
Flutter框架【2】引入静态资源以及添加交互事件_第2张图片

一、如何在flutter中导入静态资源

flutter中实现静态资源的显示,比如展示一个图片,需要三步:

  1. 在工作目录下添加该图片资源
  2. 在配置文件里面进行声明
  3. 界面中直接引用

1.在工作目录下添加该图片资源

在工作目录下添加asset 文件夹,在该文件夹下添加图片文件【目录结构如下图所示】:
Flutter框架【2】引入静态资源以及添加交互事件_第3张图片

2. 在配置文件里面进行声明:

Flutter框架【2】引入静态资源以及添加交互事件_第4张图片

3. 界面中直接引用

使用Image组件,直接使用路径访问对应静态图片资源

new Image(
	width:300,
	image:AssetImage('images/1.jpg')
)

二、如何为widget赋予交互效果

在上一节【Flutter框架【1】_widget以及简单静态布局】的布局完成后,我们实现的效果是下图所示

Flutter框架【2】引入静态资源以及添加交互事件_第5张图片

在我们插入图片资源后,下一步就要完成★点击的交互效果。
在之前,我们要了解两个概念

  1. widget分为ÿ

你可能感兴趣的:(前端_Flutter,flutter,交互,android)