Flutter深入淺出元件篇---Padding、AnimatedPadding

Jimi發表於2021-08-27
Flutter元件padding

Padding介紹

​ 在應用程式中有許多widget 時，這個時候畫面常常會變得很擁擠，這個時候如果想要在widget之間來保留一些間距，那就用 Padding

為什麼使用 Padding 而不使用 Container.padding 屬性的 Container?

​ Container 是將許多更簡單的 widget 組合在一個方便的包中，如果只需要設定 padding ，那我們最好使用 Padding 而不是 Container

示例程式碼

本文中很多效果都沒有截圖，可下載原始碼執行專案 原始碼地址，或者通過視訊教程檢視 視訊教程地址

Padding屬性和說明

總共2個屬性

欄位屬性描述
paddingEdgeInsetsGeometry給子widget的間距
childWidget子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 最佳，而不需要花費大量時間去寫動畫。

相關文章