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

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

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

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

// 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: [
  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示例效果：

// Offstage

import 'package:flutter/material.dart';

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

}

class OffstageLearnState extends State {
  bool _offstage = false;
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
 title: Text('Offstage'),
      ),
      body: Column(children: [
 // 视觉上隐藏小部件  _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的功能即在视觉上隐藏Widget，设定参数为_offstage，为true即隐藏，反之则相反如果是true的，则将子元素放置在树中，但是不绘制任何内容，不让子元素用于hit测试，也不占用父元素中的任何空间。如果为false，则将子元素作为正常值包含在树中。

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

• _offstage 即控制是否隐藏子元素

_offstage=false时：

// Offstage

import 'package:flutter/material.dart';

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

}

class OffstageLearnState extends State {
  bool _offstage = true;
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
 title: Text('Offstage'),
      ),
      body: Column(children: [
 // 视觉上隐藏小部件  _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=true时：

// Offstage

import 'package:flutter/material.dart';

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

}

class OffstageLearnState extends State {
  bool _offstage = true;
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
 title: Text('Offstage'),
      ),
      body: Column(children: [
 // 视觉上隐藏小部件  _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; 
     });
   },
 ),
      ],)
    );
  }
}

效果如下：