Flutter布局调整插件end_padding的使用

Flutter布局调整插件end_padding的使用

GitHub stars Package: end_padding Language: Dart License: MIT

该插件是最简单的布局调整工具之一，用于在列表末尾添加填充，以确保系统导航或浮动操作按钮不会覆盖最后的部件。

安装

要使用此插件，通过以下命令将其添加为依赖项：

flutter pub add end_padding

入门

只需将 EndPadding 或 SilverEndPadding 添加到你的小部件列表的末尾。或者使用 <List<Widget>> 的扩展方法。

使用

const EndPadding(),

const SliverEndPadding(),

ListView(
    children: someListOfWidgets.endPadding(),
)

有关更多详细信息，请访问 文档。

示例：带有浮动操作按钮的彩色 EndPadding

Padding Image

完整示例代码

import 'package:end_padding/end_padding.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(const MainApp());
  // 启用边缘到边缘模式
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
  SystemChrome.setSystemUIOverlayStyle(
    const SystemUiOverlayStyle(
      systemNavigationBarColor: Colors.transparent,
    ),
  );
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (context, child) {
        // 启用边缘到边缘模式
        SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
        return child!;
      },
      home: Scaffold(
        appBar: AppBar(
          title: const Text('End Padding Example'),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: const Icon(Icons.add),
        ),
        body: SingleChildScrollView(
          child: Column(
            children: [
              for (var i = 0; i < 25; i++)
                ListTile(
                  title: Text('Item $i'),
                ),
              // 在一个有色框内以查看填充效果
              const ColoredBox(
                color: Colors.red,
                child: EndPadding(
                  useFloating: true,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter布局调整插件end_padding的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter布局调整插件end_padding的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


end_padding 是 Flutter 中一个用于调整布局的插件，通常用于在 Row 或 Column 中添加末尾的填充（padding）。这个插件可以帮助开发者在布局的末尾添加额外的空间，而不需要手动计算和设置 Padding 或 SizedBox。

安装 end_padding

首先，你需要在 pubspec.yaml 文件中添加 end_padding 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  end_padding: ^1.0.0

然后运行 flutter pub get 来安装依赖。

使用 end_padding

end_padding 提供了一个 EndPadding 小部件，可以在 Row 或 Column 的末尾添加填充。

在 Row 中使用 EndPadding

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('EndPadding Example')),
        body: Center(
          child: Row(
            children: [
              Text('Item 1'),
              Text('Item 2'),
              EndPadding(endPadding: 16.0), // 在Row的末尾添加16.0的填充
            ],
          ),
        ),
      ),
    );
  }
}

在 Column 中使用 EndPadding

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('EndPadding Example')),
        body: Center(
          child: Column(
            children: [
              Text('Item 1'),
              Text('Item 2'),
              EndPadding(endPadding: 16.0), // 在Column的末尾添加16.0的填充
            ],
          ),
        ),
      ),
    );
  }
}
回到顶部