Flutter的第一个界面&ListView简单展示

657 阅读1分钟

简单体验

类似于任何应用,需要导入相应的目标库,在flutter中,导入package:flutter/material.dart

想要展示对应的界面,入口函数main并且要放到runApp方法中。在flutter中类似于组件的都叫做widget,当前界面有两个,一个是center,一个是text,所写的界面不会被改变,所以要加常量修饰const,不然会报警告,在flutter中,所有的界面更新都是增量更新,只有改变的地方会重新绘制。

截屏2021-10-25 下午2.49.55.png

截屏2021-10-25 下午2.51.00.png

自定义widget,在flutter中有两种,一种是有状态(stateful)一种是无状态(stateless)widget,前者是后者的特殊封装形式,无状态就是内部组件的状态不会保留,每次都是最新的。build方法用于继承并渲染。

截屏2021-10-25 下午3.24.20.png

MaterialApp

截屏2021-10-25 下午6.08.00.png 截屏2021-10-25 下午3.53.40.png

截屏2021-10-25 下午3.53.50.png

通过封装好的MaterialApp去创建相应的widget,可以看到这个MaterialApp是继承于一个stateful,但是我返回的却是statelessless,说明并不冲突。这里只是简单地创建了一个导航栏。

Scaffold里面除了appbar还有body,只需要往body里面加组件一样可以展示。

截屏2021-10-25 下午4.01.33.png

截屏2021-10-25 下午4.01.25.png

ListView

截屏2021-10-25 下午6.08.00.png

截屏2021-10-25 下午6.08.11.png

listView创建通过命名函数创建,只需要传一个builder构造器,对应的数据数量两个参数。构造器单独创建,类似于cellForRow里面的cell的绘制,所有的组件可以放到container上面,设置好边距,把组件加到child上,如果是多个的话,看排列方式,上下使用column即可。