1. 首頁 > 生活百科 > >

flutter系列之:把box布局用出花來

生活百科

目錄

  • 簡介
  • LimitedBox
  • SizedBox
  • FittedBox
  • 總結
簡介flutter中的layout有很多，基本上看layout的名字就知道這個layout到底是做什么用的 。比如說這些layout中的Box，從名字就知道這是一個box的布局，不過flutter中的box還有很多種，今天我們來介紹最常用的LimitedBox,SizedBox和FittedBox 。
LimitedBoxLimitedBox是一種限制大小的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，并且并未設置任何大小，那么將會得到下面的界面：
flutter系列之:把box布局用出花來

文章插圖
可以看到現在看到的界面是空白的 。
當然，你可以給Container設置height屬性來達到對應的目的：
Widget build(BuildContext context) {return ListView(children: [for(var i=0; i < 10 ; i++)Container(height: 100,color: list[i % 4],)],);}或者使用LimitedBox來達到同樣的效果：
【flutter系列之:把box布局用出花來】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],),)],);}我們可以得到下面的界面：
flutter系列之:把box布局用出花來

文章插圖
SizedBoxSizedBox從名字就知道是給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 。最后得到的界面如下：
flutter系列之:把box布局用出花來

文章插圖
事實上SizedBox的width和height并不一定是固定的值，我們可以將他們設置為double.infinity ， 表示child widget會盡可能的填充 。
比如下面的例子:
Widget build(BuildContext context) {return SizedBox(width: double.infinity,height: double.infinity,child: Container(color: Colors.blue,),);}展示的界面是這樣的:
flutter系列之:把box布局用出花來

文章插圖
SizedBox也提供了一個expand方法來提供類似的功能:
Widget build(BuildContext context) {return SizedBox.expand(child: Container(color: Colors.blue,),);}上面的代碼和使用double.infinity是等價的 。
SizedBox還可以不包含任何child,在這種情況下，SizedBox表示的就是一個空白gap 。
FittedBoxFittedBox就是填充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'),);}

推薦閱讀