重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
要实现上面的效果,每个种类的标签横向滚动,实现的方式,最外层的大分类标签一个ListView,每个分类的标签也是ListView 设置横向滚动结合Wrap组件就能实现。
创新互联专注于网站建设|网站建设维护|优化|托管以及网络推广,积累了大量的网站设计与制作经验,为许多企业提供了网站定制设计服务,案例作品覆盖iso认证等行业。能根据企业所处的行业与销售的产品,结合品牌形象的塑造,量身开发品质网站。
在编写几个 Flutter 项目后,发现 Flutter 的强大之处在于业务中所有用到的控件以及场景都有对应的处理方案;而 Dart 语言也与 Java 、 Kotlin 类似,所以对 Android 开发者来说门槛非常低;特意记录一下常用的控件及其使用:
StatelessWidget 不需要额外的创建 State
StatefulWidget 创建 State 类,并可以在其中保存一些状态
only 可以单独设置每个方向的内边距
类似于 LinearLayout 中的 orientation 设置为 vertical , mainAxisAlignment 表示竖向的一个对齐方式, crossAxisAlignment 表示横向的对齐方式
与 Column 相反,主轴是横向,对齐方式类似, crossAxisAlignment 表示竖向的对齐方式
类似 SizedBox ,一个容器,但是主要功能是有一个 decoration —— 装饰器,作用是绘制背景,或者使用 item 中的阴影
栈,先入后出,类似于 Android 上的 FrameLayout
通常配合 Stack 使用,固定显示在某一个位置
配合多 child 使用,会填充剩余的空间
Image 功能强大,使用不同的方法可以加载不同来源的图片
看到这些方法,突然觉得 Flutter 太香了,而且 Image 可以配置 clip 等裁剪出不同形状的图片,无论是圆形还是五角星都不在话下,然而 Android 要实现不规则的形状,可是要下不少功夫的。
名字和 Android 的一模一样,但是用法却比 Android 的简单很多:
主要就是 itemCount 与 itemBuilder ,其余就是配置样式, itemBuilder 需要返回一个 widget ,当然了,每个 ListView 都有其对应的 item ,在里面的方法中编写 widget 即可
与 ListView 类似,但是需要有一个 delegate 类,作用是设置有多少列,每一列之间的间距是多少
GridView 没有 build , children 表示所有的子 view
最常用的控件之一,有非常多的样式, Flutter 中通常是使用装饰器来处理控件的,如背景使用 BoxDecoration , TextFiled 使用 InputDecoration ; 使用如下
在开发中,文本是我们最常接触的控件。这篇博客来分享一下 Flutter 中的 Text 文本组件,我们展示的文本都可以用这个组件来展示,希望看文章的小伙伴有所帮助。
这样我们就可以在界面当中显示一个文本,显示是 Hello Flutter 。下面我们来说说 Text 组件的属性:
设置文本颜色:
设置文本大小:
设置文本样式-加粗:
设置文本样式-斜体:
设置文本位置:
TextAlign可选属性: center 、 end 、 start 、 justify 、 left 、 right 。
设置文本高度:
设置文本最大行数:
设置文本有下划线:
设置文本有虚线类型下划线:
设置文字间隔:
文本超过最大行数设置 ... :
实例中有3个Tab标签Home, School,Self;在School页面添加功能跳转到Home.
需要注意的地方:
没有的话再次设置selectedIndex不会刷新UI,是一个比较特殊的地方.
流式布局(Liquid)的特点(也叫"Fluid") 是页面元素的宽度按照屏幕分辨率进行适配调整,但整体布局不变。栅栏系统(网格系统),用户标签等。在Flutter中主要有Wrap和Flow两种Widget实现。
在介绍Row和Colum时,如果子widget超出屏幕范围,则会报溢出错误,在Flutter中通过Wrap和Flow来支持流式布局,溢出部分则会自动折行。
上述有很多属性和Row的相同,其意义其实也是相同的,这里我就不一一介绍了,主要介绍下不同的属性:
我们一般很少会使用Flow,因为其过于复杂,需要自己实现子widget的位置转换,在很多场景下首先要考虑的是Wrap是否满足需求。Flow主要用于一些需要自定义布局策略或性能要求较高(如动画中)的场景。Flow有如下优点:
我们对六个色块进行自定义流式布局:
实现TestFlowDelegate:
可以看到我们主要的任务就是实现paintChildren,它的主要任务是确定每个子widget位置。由于Flow不能自适应子widget的大小,我们通过在getSize返回一个固定大小来指定Flow的大小,实现起来还是比较麻烦的。