Flutter 基础布局Widgets之Padding、Offstage详解

131.jpg

Padding概述

Padding作为一种向内扩充，即用来产生间距的组件，使用的方式也很简单就是是设置内边距属性，产生内边距的空白区域，使用的成本比Container要低一些，可以替代的话推荐使用Padding

Padding构造函数

const Padding({
    Key key,
    @required this.padding,
    Widget child,
  }

padding 定义padding的为EdgeInsetsGeometry，一般使用EdgeInsets
child 即需要扩充的组件

Padding示例`EdgeInsets`多种使用方式

// padding  给子节点补白，即内填充操作

import 'package:flutter/material.dart';

class PaddingLearn extends StatelessWidget {
  @override
  final boxContainer = Container(
    color: Colors.blueAccent,
    height: 50,
    width: 50,
  );
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: AppBar(title: Text('Padding')),
        body: new Center(
          child: Container(
            decoration: BoxDecoration(
              border: Border.all(),
            ),
            width: 250,
            height: 350,
            // 构建一个盒子，在盒子里测试padding的属性
            child: new Column(
              children: <Widget>[
                Padding(
                  // 上下左右全部统一补白
                  padding: EdgeInsets.all(16),
                  child: boxContainer,
                ),
                Padding(
                    // 垂直和水平方向补白
                    padding: EdgeInsets.symmetric(vertical: 0, horizontal: 30),
                    child: boxContainer
                ),
                Padding(
                    // 上、下、左、右 EdgeInsets.fromLTRB(double left, double top, double right, double bottom)
                    padding: EdgeInsets.fromLTRB(0, 30, 40, 50),
                    child: boxContainer
                ),
                Padding(
                    // 仅仅填充一个方向 比如left
                    padding: EdgeInsets.only(left: 50),
                    child: boxContainer
                )
              ]
            ),
        )
      )
    );
  }
}

Padding示例效果：

C8F8AD8AADB1170DFA5FD74B8BDC5BFB.png

// Offstage

import 'package:flutter/material.dart';

class OffstageLearn extends StatefulWidget {
  @override 
  OffstageLearnState createState() => OffstageLearnState();

}

class OffstageLearnState extends State<OffstageLearn> {
  bool _offstage = false;
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text('Offstage'),
      ),
      body: Column(children: <Widget>[
        // 视觉上隐藏小部件  _offstage 为真即隐藏
        Offstage(
          offstage: _offstage,
          child: Container(
            decoration: BoxDecoration(
              gradient: LinearGradient(colors: [Colors.blue, Colors.purple])
            ),
            width: 300,
            height: 400,
          ),
        ),
        IconButton(
          icon: Icon(Icons.accessible),
          onPressed: (){
            setState(() {
             _offstage = !_offstage; 
            });
          },
        ),
      ],)
    );
  }
}

Offstage概述

Offstage的功能即在视觉上隐藏Widget，设定参数为_offstage，为true即隐藏，反之则相反如果是true的，则将子元素放置在树中，但是不绘制任何内容，不让子元素用于hit测试，也不占用父元素中的任何空间。如果为false，则将子元素作为正常值包含在树中。

Offstage构造函数

``` const Offstage({ Key key, this.offstage = true, Widget child })```

_offstage 即控制是否隐藏子元素

Offstage对比示例

_offstage=false时：

// Offstage

import 'package:flutter/material.dart';

class OffstageLearn extends StatefulWidget {
  @override 
  OffstageLearnState createState() => OffstageLearnState();

}

class OffstageLearnState extends State<OffstageLearn> {
  bool _offstage = true;
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text('Offstage'),
      ),
      body: Column(children: <Widget>[
        // 视觉上隐藏小部件  _offstage 为真即隐藏
        Offstage(
          offstage: _offstage,
          child: Container(
            decoration: BoxDecoration(
              gradient: LinearGradient(colors: [Colors.blue, Colors.purple])
            ),
            width: 300,
            height: 400,
          ),
        ),
        IconButton(
          icon: Icon(Icons.accessible),
          onPressed: (){
            setState(() {
             _offstage = !_offstage; 
            });
          },
        ),
      ],)
    );
  }
}

效果如下：

Offstage

_offstage=true时：

// Offstage

import 'package:flutter/material.dart';

class OffstageLearn extends StatefulWidget {
  @override 
  OffstageLearnState createState() => OffstageLearnState();

}

class OffstageLearnState extends State<OffstageLearn> {
  bool _offstage = true;
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text('Offstage'),
      ),
      body: Column(children: <Widget>[
        // 视觉上隐藏小部件  _offstage 为真即隐藏
        Offstage(
          offstage: _offstage,
          child: Container(
            decoration: BoxDecoration(
              gradient: LinearGradient(colors: [Colors.blue, Colors.purple])
            ),
            width: 300,
            height: 400,
          ),
        ),
        IconButton(
          icon: Icon(Icons.accessible),
          onPressed: (){
            setState(() {
             _offstage = !_offstage; 
            });
          },
        ),
      ],)
    );
  }
}