flex布局flex布局一行三个

简介

flutter中的layout有很多,基本看layout这个名字就知道了layout它到底什么?比如这些。layout中的Box,从名字就知道这是一个box但是flutter中的box还有很多种今天我们将介绍最常用的LimitedBox,SizedBox和FittedBox。

LimitedBox

LimitedBox大小有限Box,先来看下LimitedBox的定义

class LimitedBox extends SingleChildRenderObjectWidget  

可以看到LimitedBox继承自SingleChildRenderObjectWidget,表示LimitedBox可以有一个single child

那么LimitedBox一般用在哪里?

考虑一个可滚动列表,例如ListView,因为他是unbounded的,如果ListView的子widget是Container的话,Container尽可能小,这显然不是我们想要的。以下代码为例:

  Widget build(BuildContext context) {     return ListView(       children: [         for(var i=0; i < 10 ; i  )           Container(             color: list[i % 4],           )       ],     );   } 

在ListView我们加了一个Container,这些Container中只设置了color,并且没有设置任何尺寸,则将获得以下界面:

flex布局flex布局一行三个

现在看到的界面是空白的。

当然,你可以给Container设置height属性达到相应的目的:

  Widget build(BuildContext context) {     return ListView(       children: [         for(var i=0; i < 10 ; i  )           Container(             height: 100,             color: list[i % 4],           )       ],     );   } 

或者使用LimitedBox达到同样的效果:

  Widget build(BuildContext context) {     return ListView(       children: [         for(var i=0; i < 10 ; i  )           LimitedBox(             maxHeight: 100,             child: Container(               // height: 100,               color: list[i % 4],             ),           )       ],     );   } 

我们可以得到以下界面:

flex布局flex布局一行三个

SizedBox

SizedBox从名字就知道是给的box一个指定的size。

先来看下Sizedbox的定义:

class SizedBox extends SingleChildRenderObjectWidget 

可以看到SizedBox继承自SingleChildRenderObjectWidget,表示它可以包含一个child widget。

再来看看它的构造函数

const SizedBox({ Key? key, this.width, this.height, Widget? child }) 

SizedBox主要接受width,height和它的child widget。SizedBox主要用于强制child widget的width和height保持一致。

让我们看一个具体的例子:

  Widget build(BuildContext context) {     return SizedBox(       width: 200.0,       height: 200.0,       child: Container(         color: Colors.blue,       ),     );   } 

我们在上面的例子中指定了固定的SizedBox。最终接口如下:

flex布局flex布局一行三个

事实上SizedBox的width和height不一定是固定值,我们可以把它们设置为double.infinity,表示child widget尽可能的填充。

例如:

  Widget build(BuildContext context) {     return SizedBox(       width: double.infinity,       height: double.infinity,       child: Container(         color: Colors.blue,       ),     );   } 

显示界面如下:

flex布局flex布局一行三个

SizedBox还提供了一个expand提供类似功能的方法:

  Widget build(BuildContext context) {     return SizedBox.expand(       child: Container(         color: Colors.blue,       ),     );   } 

上述代码及使用double.infinity是等价的。

SizedBox也可以不包括任何内容child,在这种情况下,SizedBox这意味着一个空白gap。

FittedBox

FittedBox就是填充box根据指定的含义,可以fit填充规则child。

先来看下FittedBox的定义:

class FittedBox extends SingleChildRenderObjectWidget { 

FittedBox继承自SingleChildRenderObjectWidget,这意味着它只包含一个child。

再看下FittedBox构造函数:

  const FittedBox({     Key? key,     this.fit = BoxFit.contain,     this.alignment = Alignment.center,     this.clipBehavior = Clip.none,     Widget? child,   }) 

FittedBox有几个非常有趣的参数,首先是fit,表示如何填充Box,它是一个BoxFit对象,BoxFit用来描述几个值fix的方式。

比如fill表示填充到box不管以前child长宽比,而contain表示尽可能包含child。

alignment是一个AlignmentGeometry,表示的是child排列方式。

clipBehavior表示的是Box和child重叠时的剪切方法。

让我们看一个具体的例子:

  Widget build(BuildContext context) {     return FittedBox(       fit: BoxFit.fill,       child: Image.asset('images/head.jpg'),     );   } 

在上面的例子中,我们使用了它BoxFit.fill让我们来看看具体的效果:

flex布局flex布局一行三个

总结

这几个box我们经常在日常工作中使用它box。大家都能熟练掌握。

本文的例子:https://github.com/ddean2009/learn-flutter.git

请参考更多内容 www.flydean.com

最流行的解读,最深刻的干货,最简洁的教程,很多你不知道的小技巧等着你去发现!

欢迎关注我的微信官方账号:「程序那些事」,懂技术,更懂你!

好了,这篇文章的内容就和大家分享到这里,如果大家对网络推广引流和网络创业项目感兴趣,可以添加微信:beng3355  备注:项目

本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 sumchina520@foxmail.com 举报,一经查实,本站将立刻删除。
如若转载,请注明出处:https://www.hzy3.com/2062.html