乐趣区

关于flutter:Flutter深入浅出组件篇PaddingAnimatedPadding

jiezi

Padding 介绍

​ 在应用程序中有许多widget 时，这个时候画面经常会变得很拥挤，这个时候如果想要在 widget 之间来保留一些间距，那就用 Padding

为什么应用 Padding 而不应用 Container.padding 属性的 Container?

​ Container 是将许多更简略的 widget 组合在一个不便的包中，如果只须要设置 padding，那咱们最好应用 Padding 而不是 Container

示例代码

本文中很多成果都没有截图，可下载源代码运行我的项目 源代码地址，或者通过视频教程查看 视频教程地址

Padding 属性和阐明

总共 2 个属性

字段 属性 形容
padding EdgeInsetsGeometry 给子 widget 的间距
child Widget 子 widget

Padding 属性具体应用

1、padding、child

​ padding 给子 widget 的间距

​ child 接管一个子 Widget

残缺代码

import 'package:flutter/material.dart';

class PaddingExample extends StatefulWidget {
  @override
  _PaddingExampleState createState() => _PaddingExampleState();
}

class _PaddingExampleState extends State<PaddingExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Padding example"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Padding(padding: EdgeInsets.all(0),
              child: Container(
                width: 100,
                height: 100,
                color: Colors.red,
              ),
            ),
            Padding(padding: EdgeInsets.all(0),
              child: Container(
                width: 100,
                height: 100,
                color: Colors.green,
              ),
            ),
            Padding(padding: EdgeInsets.all(0),
              child: Container(
                width: 100,
                height: 100,
                color: Colors.orange,
              ),
            )
          ],
        ),
      ),
    );
  }
}

EdgeInsetsGeometry 详解

​ EdgeInsetsGeometry 是一个形容边距的组件，个别都是应用它的子类 EdgeInsets 来进行设置。

1、fromLTRB

​ 设置左、上、右、下的边距，可设定不同的值。

应用办法

Padding(padding: EdgeInsets.fromLTRB(10, 20, 30, 40),
  child: Container(
    width: 100,
    height: 100,
    color: Colors.red,
  ),
),

2、all

​ 同时设置所有的边距为同一个值

应用办法

Padding(padding: EdgeInsets.all(10),
  child: Container(
    width: 100,
    height: 100,
    color: Colors.green,
  ),
)

3、only

​ 依据须要设置某一个边的间距

应用办法

Padding(
  padding: EdgeInsets.only(
    left: 10,
    right: 10
  ),
  child: Container(
    width: 100,
    height: 100,
    color: Colors.orange,
  ),
)

4、symmetric

​ 设置程度（高低）、或者垂直（左右）的间距

应用办法

Padding(
  padding: EdgeInsets.symmetric(
    vertical: 10,
    horizontal: 10
  ),
  child: Container(
    width: 100,
    height: 100,
    color: Colors.orange,
  ),
)

残缺代码

import 'package:flutter/material.dart';

class PaddingExample extends StatefulWidget {
  @override
  _PaddingExampleState createState() => _PaddingExampleState();
}

class _PaddingExampleState extends State<PaddingExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Padding example"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Padding(padding: EdgeInsets.fromLTRB(10, 20, 30, 40),
              child: Container(
                width: 100,
                height: 100,
                color: Colors.red,
              ),
            ),
            Padding(padding: EdgeInsets.all(10),
              child: Container(
                width: 100,
                height: 100,
                color: Colors.green,
              ),
            ),
            Padding(
              padding: EdgeInsets.only(
                left: 10,
                right: 10
              ),
              child: Container(
                width: 100,
                height: 100,
                color: Colors.orange,
              ),
            ),
            Padding(
              padding: EdgeInsets.symmetric(
                vertical: 10,
                horizontal: 10
              ),
              child: Container(
                width: 100,
                height: 100,
                color: Colors.orange,
              ),
            )
          ],
        ),
      ),
    );
  }
}

AnimatedPadding 介绍

    `Padding` 组件的动画版本，在设置的工夫内缩放或放大到指定的 padding

AnimatedPadding 构造函数

  AnimatedPadding({
    Key? key,
    required this.padding, // 边距
    this.child,  // 子 Widget
    Curve curve = Curves.linear,  // 动画的静止速率
    required Duration duration,  // 动画的持续时间
    VoidCallback? onEnd,   // 动画完结时的回调
  }) : assert(padding != null),
       assert(padding.isNonNegative),
       super(key: key, curve: curve, duration: duration, onEnd: onEnd);

AnimatedPadding 残缺示例代码

import 'package:flutter/material.dart';

class AnimatedPaddingExample extends StatefulWidget {
  @override
  _AnimatedPaddingExampleState createState() => _AnimatedPaddingExampleState();
}

class _AnimatedPaddingExampleState extends State<AnimatedPaddingExample> {
  double paddingAllValue = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("AnimatedPaddingExample"),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[Text('Padding: $paddingAllValue'),
          AnimatedPadding(padding: EdgeInsets.all(paddingAllValue),
            duration: Duration(milliseconds: 1000),
            curve: Curves.easeInOut,
            child: Container(width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height / 4,
              color: Colors.blue,
            ),
            onEnd: () {print("动画完结时的回调");
            },
          ),
          ElevatedButton(child: Text('扭转 padding 的值'),
            onPressed: () {setState(() {paddingAllValue = paddingAllValue == 0.0 ? 50.0 : 0.0;});
            }),
        ],
      ),
    );
  }
}

AnimatedPadding 成果展现

总结

​ 当只须要给组件之间减少一些间距时，应用 Padding 是最好的抉择。而如果的Padding 在某种状况下须要扭转其大小并且须要减少动画成果时，应用AnimatedPadding 最佳，而不须要破费大量工夫去写动画。

退出移动版