当前位置: 萬仟网 > IT编程>移动开发>Android > Flutter学习笔记(22)--单个子元素的布局Widget

Flutter学习笔记(22)--单个子元素的布局Widget

2019年08月24日 17:12  | 萬仟网IT编程  | 我要评论

如需转载,请注明出处:flutter学习笔记(22)--单个子元素的布局widget

入门学习flutter有一段时间了,demo用过的widget也有不少,想着整体的梳理一下,所以今天结合flutter中文网和书籍梳理一下widget的使用,首先梳理一下拥有单个子元素的布局widget。

  • container:一个拥有绘制、定位、调整大小的widget
  • padding:一个widget,会给其子widget添加指定的填充
  • center:将其子widget居中显示在自身内部的widget
  • align:一个widget,它可以将其子widget对其,并可以根据子widget的大小自动调整大小
  • fittedbox:按自己的大小调整其子widget的大小和位置
  • baseline:根据子项的基准线对它们的位置进行定位的widget
  • offstage:一个布局widget,可以控制其子widget的显示和隐藏
  • limitedbox:一个当其自身不受约束时才限制其大小的盒子
  • overflowbox:对其子项施加不同约束的widget,它可能允许子项溢出父级
  • sizedbox:一个特定大小的盒子,这个widget强制它的孩子有一个特性的宽度和高度。如果宽度或高度为null,则此widget将调整自身大小以匹配该维度中的孩子的大小

接下来就是按照上面列出来的widget,一个一个写demo,每个demo里面会有注释,还会附上效果截图

 

  • container

import 'package:flutter/material.dart';

void main() => runapp(demoapp());

class demoapp extends statelesswidget{
  @override
  widget build(buildcontext context) {
    return new materialapp(
      title: 'child demo',
      home: new scaffold(
        appbar: appbar(
          title: new text('child demo'),
        ),
        body: new _containerdemo(),
      ),
    );
  }
}

class _containerdemo extends statelesswidget {
  @override
  widget build(buildcontext context) {
    return new container(
      width: 300.0,
      height: 200.0,
//          color: colors.cyan,
      margin: edgeinsets.only(left: 20.0,top: 10.0,right: 0,bottom: 0),
      decoration: new boxdecoration(
          color: colors.green,//填充色
          border: new border.all(
            color: colors.deeporange,//边框颜色
          ),
          borderradius: borderradius.all(radius.circular(10.0))//圆角大小
      ),
    );
  }
}

 

  • padding

 

import 'package:flutter/material.dart';

void main() => runapp(demoapp());

class demoapp extends statelesswidget{
  @override
  widget build(buildcontext context) {
    return new materialapp(
      title: 'child demo',
      home: new scaffold(
        appbar: appbar(
          title: new text('child demo'),
        ),
        body: new _containerdemo(),
      ),
    );
  }
}

class _paddingdemo extends statelesswidget {
  @override
  widget build(buildcontext context) {
    return new padding(
        padding: edgeinsets.all(30.0),
        child: new card(
          color: colors.pink,
        ),
    );
  }
}

class _containerdemo extends statelesswidget {
  @override
  widget build(buildcontext context) {
    return new container(
      width: 300.0,
      height: 200.0,
//          color: colors.cyan,
      margin: edgeinsets.only(left: 20.0,top: 10.0,right: 0,bottom: 0),
      decoration: new boxdecoration(
          color: colors.green,//填充色
          border: new border.all(
            color: colors.deeporange,//边框颜色
          ),
          borderradius: borderradius.all(radius.circular(10.0))//圆角大小
      ),
      child: new _paddingdemo(),
    );
  }
}

class _centerdemo extends statelesswidget {
  @override
  widget build(buildcontext context) {
    return new center(
      child: text('center demo'),
    );
  }
}

 

  • center

import 'package:flutter/material.dart';

void main() => runapp(demoapp());

class demoapp extends statelesswidget{
  @override
  widget build(buildcontext context) {
    return new materialapp(
      title: 'child demo',
      home: new scaffold(
        appbar: appbar(
          title: new text('child demo'),
        ),
        body: new _containerdemo(),
      ),
    );
  }
}

class _containerdemo extends statelesswidget {
  @override
  widget build(buildcontext context) {
    return new container(
      width: 300.0,
      height: 200.0,
//          color: colors.cyan,
      margin: edgeinsets.only(left: 20.0,top: 10.0,right: 0,bottom: 0),
      decoration: new boxdecoration(
          color: colors.green,//填充色
          border: new border.all(
            color: colors.deeporange,//边框颜色
          ),
          borderradius: borderradius.all(radius.circular(10.0))//圆角大小
      ),
      child: new _centerdemo(),
    );
  }
}

class _centerdemo extends statelesswidget {
  @override
  widget build(buildcontext context) {
    return new center(
      child: text('center demo'),
    );
  }
}

 

  • align

import 'package:flutter/material.dart';

void main() => runapp(demoapp());

class demoapp extends statelesswidget{
  @override
  widget build(buildcontext context) {
    return new materialapp(
      title: 'child demo',
      home: new scaffold(
        appbar: appbar(
          title: new text('child demo'),
        ),
        body: new _containerdemo(),
      ),
    );
  }
}


class _containerdemo extends statelesswidget {
  @override
  widget build(buildcontext context) {
    return new container(
      width: 300.0,
      height: 200.0,
//          color: colors.cyan,
      margin: edgeinsets.only(left: 20.0,top: 10.0,right: 0,bottom: 0),
      decoration: new boxdecoration(
          color: colors.green,//填充色
          border: new border.all(
            color: colors.deeporange,//边框颜色
          ),
          borderradius: borderradius.all(radius.circular(10.0))//圆角大小
      ),
      child: new _aligndemo(),
    );
  }
}

class _aligndemo extends statelesswidget {
  @override
  widget build(buildcontext context) {
    return new stack(
      children: <widget>[
        new align(
          child: new text('align demo 1'),
          alignment: fractionaloffset.topleft,//左上角
        ),
        new align(
          child: new text('align demo 2'),
          alignment: fractionaloffset.center,//水平、垂直方向居中
        ),
        new align(
          child: new text('align demo 3'),
          alignment: fractionaloffset.bottomright,//右下角
        ),
      ],
    );
  }
}

 

  • fittedbox

布局行为分两种情况:

1.如果外部有约束的话,按照外部约束调整自身尺寸,然后缩放调整child,按照指定的条件进行布局。

2.如果外部没有约束条件的话,则跟child尺寸一致,指定的缩放以及位置属性将不起作用。

fittedbox有两个重要属性,fit和alignment

fit:缩放的方式,默认的属性是boxfit.contain,child在fittedbox范围内,尽可能大,但是不会超出其尺寸,这里需要注意一点,contain是在保持这child宽高比的大前提下,尽可能的填满,一般情况下,宽度或高度达到最大值时,就会停止缩放。

boxfit.none:没有任何填充模式。

boxfit.fill:全部覆盖,不按照宽高比填充,内容不会超过容器范围。

boxfit.contain:按宽高比等比填充模式,内容不会超过容器范围。

boxfit.cover:按原始尺寸填充整个容器模式,内容有可能会超过容器。

boxfit.width:按照内容宽度填充整个容器,内容不会超过容器。

boxfit.height:按照内容高度填充整个容器,内容不会超过容器。

  • baseline

baseline基准线是指将所有元素底部放在同一条水平线上。

import 'package:flutter/material.dart';

void main() => runapp(demoapp());

class demoapp extends statelesswidget{
  @override
  widget build(buildcontext context) {
    return new materialapp(
      title: 'child demo',
      home: new scaffold(
        appbar: appbar(
          title: new text('child demo'),
        ),
        body: new _baselinedemo(),
      ),
    );
  }
}

class _baselinedemo extends statelesswidget {
  @override
  widget build(buildcontext context) {
    return new row(
      children: <widget>[
        new baseline(
            baseline: 100.0,
            baselinetype: textbaseline.ideographic,
            child: new text('aabbccdd',style: textstyle(fontsize: 30.0),),
        ),
      ],
    );
  }
}

 

  • offstage

offstage的作用很简单,通过一个参数来控制child是否显示,也算是比较常用的组件

offstage属性:默认为true,表示不显示,当为false的时候,会显示该组件

import 'package:flutter/material.dart';

void main() => runapp(demoapp());

class demoapp extends statelesswidget{
  @override
  widget build(buildcontext context) {
    return new materialapp(
      title: 'child demo',
      home: new _offstagedemo()
    );
  }
}

class _offstagedemo extends statefulwidget {
  @override
  state<statefulwidget> createstate() {
    // todo: implement createstate
    return new _offstagedemostate();
  }
}

class _offstagedemostate extends state {
  bool _offstage = false;
  @override
  widget build(buildcontext context) {
    return new scaffold(
      appbar: appbar(
        title: new text('child demo'),
      ),
      floatingactionbutton: floatingactionbutton(onpressed: (){
        setstate(() {
          _offstage = !_offstage;
        });
      }),
      body: new center(
        child: new offstage(
          offstage: _offstage,
          child: new text('显示和隐藏',style: textstyle(fontsize: 40.0),),
        ),
      ),
    );
  }
}

 

  • limitedbox

 

import 'package:flutter/material.dart';

void main() => runapp(demoapp());

class demoapp extends statelesswidget{
  @override
  widget build(buildcontext context) {
    return new materialapp(
      title: 'child demo',
      home: new scaffold(
        appbar: appbar(
          title: new text('child demo'),
        ),
        body: new row(
          children: <widget>[
            new container(
              width: 100.0,
              color: colors.blue,
            ),
            new limitedbox(
              maxwidth: 100,
              child: new container(
                color: colors.pink,
                width: 300,
              ),
            )
          ],
        ),
      )
    );
  }
}

 

  • overflowbox

import 'package:flutter/material.dart';

void main() => runapp(demoapp());

class demoapp extends statelesswidget{
  @override
  widget build(buildcontext context) {
    return new materialapp(
      title: 'child demo',
      home: new scaffold(
        appbar: appbar(
          title: new text('child demo'),
        ),
        body: new container(
          color: colors.blue,
          width: 200,
          height: 200,
          padding: edgeinsets.all(20.0),
          child: new overflowbox(
            alignment: alignment.topleft,
            maxwidth: 200,
            maxheight: 200,
            child: new container(
              color: colors.pink,
            ),
          ),
        ),
      )
    );
  }
}

 

  • sizedbox

sizedbox组件是一个特定大小的盒子,这个组件强制它的child有特定的宽度和高度,如果宽度和高度为null,则此组件将调整自身的大小以匹配该维度中child的大小

import 'package:flutter/material.dart';

void main() => runapp(demoapp());

class demoapp extends statelesswidget{
  @override
  widget build(buildcontext context) {
    return new materialapp(
      title: 'child demo',
      home: new scaffold(
        appbar: appbar(
          title: new text('child demo'),
        ),
        body: new sizedbox(
          width: 200,
          height: 200,
          child: new container(
            width: 100,
            height: 600,
            color: colors.blue,
          ),
        ),
      )
    );
  }
}

 

 以上就是单个子元素的布局widget的梳理,并不是很全,我只是把我认为在开发中可能会经常用到的widget梳理了一下,也方便自己以后查看!!!

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

◎已有 0 人评论

Copyright © 2019  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com