flutter抽象组件(flutter 自定义组件)

网友投稿 1392 2022-12-26

本篇文章给大家谈谈flutter抽象组件,以及flutter 自定义组件对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 今天给各位分享flutter抽象组件的知识,其中也会对flutter 自定义组件进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!

本文目录一览:

3. Flutter - 基础组件 之 Text

Text继承自 StatelessWidget ,Text 主要通过设置 文本布局 及 文本样式 控制显示方式。

1. 文本布局: 例如文本对齐方式 textAlign 、文本排版方向 textDirection ,文本显示最大行数 maxLines 、文本截断规则 overflow 等等

2 文本样式: 如字体名称 fontFamily 、字体大小 fontSize 、文本颜色 color 、文本阴影 shadows 等等,这些参数被统一封装到了构造函数中的参数 style(TextStyle) 中

  在iOS中,我们可以使用NSAttributedString进行富文本设置。在Flutter中 我们可以通过 Text.rich() 或 RichText() 进行富文本设置。

两者均为 InlineSpan 类型, InlineSpan 为抽象类。

抽象类不能直接实例化。Flutter已为我们提供了

且 WidgetSpan 继承自 PlaceholderSpan

Flutter(73):Sliver组件之SliverGrid

Sliver组件中的GridView

这个在SliverList中介绍过了,不在说明了: Flutter(72):Sliver组件之SliverList

注意了这里的代理类都是提供了抽象父类供开发者自己实现的。

下一节:Sliver组件之SliverPadding

Flutter 可滚动组件 之 GridView (十七)

GridView可以构建一个二维网格列表

默认构造函数如下:

我们可以看到,GridView和ListView的大多数参数都是相同的,它们的含义也都相同的。我们唯一需要关注的是gridDelegate参数,类型是SliverGridDelegate,它的作用是控制GridView子组件如何排列(layout)。

SliverGridDelegate 是一个抽象类,定义了GridView Layout相关接口,子类需要通过实现它们来实现具体的布局算法。Flutter中提供了两个 SliverGridDelegate 的子类 SliverGridDelegateWithFixedCrossAxisCount 和 SliverGridDelegateWithMaxCrossAxisExtent

SliverGridDelegateWithFixedCrossAxisCount
该子类实现了一个横轴为固定数量子元素的layout算法,其构造函数为:

可以发现,子元素的大小是通过crossAxisCount和childAspectRatio两个参数共同决定的。注意,这里的子元素指的是子组件的最大显示空间,注意确保子组件的实际大小不要超出子元素的空间。

示例

SliverGridDelegateWithMaxCrossAxisExtent
该子类实现了一个横轴子元素为固定最大长度的layout算法,其构造函数为

maxCrossAxisExtent为子元素在横轴上的最大长度,之所以是“最大”长度,是因为横轴方向每个子元素的长度仍然是等分的,举个例子,如果ViewPort的横轴长度是450,那么当maxCrossAxisExtent的值在区间[450/4,450/3)内的话,子元素最终实际长度都为112.5,而childAspectRatio所指的子元素横轴和主轴的长度比为最终的长度比。其它参数和SliverGridDelegateWithFixedCrossAxisCount相同。

示例

GridView.count构造函数内部使用了SliverGridDelegateWithFixedCrossAxisCount,我们通过它可以快速的创建横轴固定数量子元素的GridView

示例

GridView.extent构造函数内部使用了SliverGridDelegateWithMaxCrossAxisExtent,我们通过它可以快速的创建横轴子元素为固定最大长度的的GridView

示例

上面我们介绍的GridView都需要一个widget数组作为其子元素,这些方式都会提前将所有子widget都构建好,所以只适用于子widget数量比较少时,当子widget比较多时,我们可以通过GridView.builder来动态创建子widget。GridView.builder 必须指定的参数有两个:

示例
假设我们需要从一个异步数据源(如网络)分批获取一些Icon,然后用GridView来展示:

_retrieveIcons():在此方法中我们通过Future.delayed来模拟从异步数据源获取数据,每次获取数据需要200毫秒,获取成功后将新数据添加到_icons,然后调用setState重新构建。
在 itemBuilder 中,如果显示到最后一个时,判断是否需要继续获取数据,然后返回一个Icon。

GridView.builder 源码定义如下:

它主要要传两个参数 gridDelegate 和 childrenDelegate ,gridDelegate是SliverGridDelegate类型,SliverGridDelegate它有两个子类,就是我们上文中说的 SliverGridDelegateWithFixedCrossAxisCount 和 SliverGridDelegateWithMaxCrossAxisExtent ,childrenDelegate 是SliverChildDelegate类型,SliverChildDelegate也有两个子类 SliverChildBuilderDelegate 和 SliverChildListDelegate ,一个是通过Builder创建Item,一个是指定所有item。和ListView 很类似

示例

补充知识点:
GridView中的Sliver是SliverGrid
ListView 和 GridView 都是继承于BoxScrollView,BoxScrollView中存在一个抽象方法buildChildLayout,这个buildChildLayout方法是在提供Sliver,GridView中关于buildChildLayout实现如下:

Flutter入门(二)——实现一个简单的demo页面

首先查看入口函数:

类MyApp:

MyHomePage:

state:

build:

此demo页面涉及到两个组件:图片和icon。在这里做一个简单的介绍,更详细的学习请参考flutter官网和相关书籍

在flutter中,我们可以通过Image组件来加载并显示图片,Image的数据源可以是asset、文件、内存以及网络。

ImageProvider 是一个抽象类,主要定义了图片数据获取的接口 load() ,从不同的数据源获取图片需要实现不同的 ImageProvider ,如 AssetImage 是实现了从Asset中加载图片的ImageProvider,而 NetworkImage 实现了从网络加载图片的ImageProvider。

​ Image也提供了一个快捷的构造函数 Image.asset 用于从asset中加载、显示图片:

Image也提供了一个快捷的构造函数 Image-work 用于从网络加载、显示图片:

Flutter中,可以像web开发一样使用iconfont,iconfont也即"字体图标",它是将图标做成字体文件,然后通过指定不同的字符而显示不同的图片。

加号为图片组件,减一为icon组件。点击加号,数字加1;点击-1,数字减少1。

StatefulWidget和StatelessWidget

在 Flutter 中自定义组件其实就是一个类,这个类需要继承 StatelessWidget/StatefulWidget:

StatelessWidget中实现数据变化
在使用StatefulWidget前,先看一下在StatelessWidget中,点击按钮,改变数据后的效果

此时,当点击按钮,改变countNum的值时,发现控制台里面的打印中,数值是变化的,但是页面中却没有变化效果,此时就需要使用StatefulWidget了

StatefulWidget是一个抽象类,在这个类中,有一个抽象方法createState(),然后在这个抽象方法中调用自定义的_HomePageState()类,_HomePageState()类需要继承State类,最后在这个类中实现build()方法。 关于flutter抽象组件和flutter 自定义组件的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。 flutter抽象组件的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于flutter 自定义组件、flutter抽象组件的信息别忘了在本站进行查找喔。

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:SQL返回Map集合或者对象的操作
下一篇:微信小程序app下载(微信小程序 APP)
相关文章

 发表评论

暂时没有评论,来抢沙发吧~