关于flutter:flutter系列之把box布局用出花来

简介

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，并且并未设置任何大小，那么将会失去上面的界面：

能够看到当初看到的界面是空白的。

当然，你能够给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],
            ),
          )
      ],
    );
  }

咱们能够失去上面的界面：

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。最初失去的界面如下：

事实上SizedBox的width和height并不一定是固定的值，咱们能够将他们设置为double.infinity，示意child widget会尽可能的填充。

比方上面的例子:

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

展现的界面是这样的:

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来填充，咱们看下具体的成果：

总结

这几个box是咱们在日常的工作中常常会用到的box。大家能够熟练掌握。

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

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

最艰深的解读，最粗浅的干货，最简洁的教程，泛滥你不晓得的小技巧等你来发现！

欢送关注我的公众号:「程序那些事」,懂技术，更懂你！