Flutter额外填充插件padding_extra的使用

Flutter额外填充插件padding_extra的使用

该插件提供了与额外填充相关的部件。

特性

• 填充部件（带快捷命名）
• 安全区域填充部件（带快捷命名）
• 对齐部件
• 大小部件
• 定位部件

开始使用

首先，在项目的pubspec.yaml文件中添加依赖：

$ flutter pub add padding_extra

这将会在你的包的pubspec.yaml文件中添加一行（并隐式运行flutter pub get）：

dependencies: 
  padding_extra: {*version}

或者，你可以通过编辑器支持的flutter pub get来完成。请查阅你使用的编辑器文档以了解更多详情。

现在可以在Dart代码中导入该包：

import 'package:padding_extra/padding_extra.dart';

使用

填充部件

• PaddingAll
• Pall
• PaddingHorizontal
• Px
• PaddingVertical
• Py
• PaddingSymmetric
• Psymm
• PaddingTop
• Pt
• PaddingLeft
• Pl
• PaddingRight
• Pr
• PaddingBottom
• Pb

安全区域填充部件

这些部件内部使用了SafeArea部件，并且可以通过MediaQuery.removePadding移除指定方向的填充。你还可以通过extra参数在该方向上添加额外的填充。

• SafeAreaHorizontal
• SafeAreaX
• SafeAreaVertical
• SafeAreaY
• SafeAreaTop
• SafeAreaLeft
• SafeAreaRight
• SafeAreaBottom

大小部件

• Full
• FullWidth
• FullW
• FullHeight
• FullH

对齐部件

• Top
• Left
• Right
• Bottom
• TopLeft
• TopRight
• BottomLeft
• BottomRight

定位部件

• PosTop
• PosRight
• PosBottom
• PosLeft
• PosTopLeft
• PosTopRight
• PosBottomLeft
• PosBottomRight
• PosCenter

示例代码

以下是一个简单的示例，展示了如何使用PaddingAll和SafeAreaHorizontal：

PaddingAll(
  24,
  child: _buildRect(context),
),
SafeAreaHorizontal(
  child: Container(
    color: Colors.yellow,
    width: double.infinity,
    height: 100,
  ),
),

完整的示例代码如下：

import 'package:flutter/material.dart';
import 'package:padding_extra/padding_extra.dart';

void main() async {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            PaddingAll(
              24,
              child: _buildRect(context),
            ),
            SafeAreaHorizontal(
              child: Container(
                color: Colors.yellow,
                width: double.infinity,
                height: 100,
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildRect(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      color: Colors.red,
    );
  }
}