Flutter动态调整间距插件switchable_padding的使用

Flutter动态调整间距插件switchable_padding的使用

概述

switchable_padding 是一个用于支持响应式设计的 Flutter 插件。它允许根据屏幕宽度动态调整 Padding 值。

使用步骤

1. 引入插件

在你的项目中添加以下依赖：

import 'package:switchable_padding/switchable_padding.dart';

2. 使用 SwitchablePadding

将需要调整间距的 Widget 放置为 SwitchablePadding 的子元素，并通过回调函数定义不同宽度下的间距规则。

示例代码：

SwitchablePadding(
  padding: (width) {
    if (width < 600) {
      return const EdgeInsets.all(0); // 小于 600 宽度时无间距
    } else {
      return const EdgeInsets.all(16); // 大于等于 600 宽度时设置 16 的间距
    }
  },
  child: Text('Hello World'), // 需要调整间距的子组件
),

完整示例代码

以下是一个完整的示例代码，展示了如何在多层嵌套的布局中动态调整间距：

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

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

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  // 定义间距规则
  _padding(BoxConstraints constraints) {
    if (constraints.maxWidth < 600) {
      return const EdgeInsets.all(0); // 小于 600 宽度时无间距
    } else if (constraints.maxWidth < 905) {
      return const EdgeInsets.all(16); // 600 到 905 宽度时设置 16 的间距
    } else if (constraints.maxWidth < 1440) {
      return const EdgeInsets.all(32); // 905 到 1440 宽度时设置 32 的间距
    } else {
      return const EdgeInsets.all(48); // 大于等于 1440 宽度时设置 48 的间距
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Container(
        color: Theme.of(context).colorScheme.background, // 设置背景颜色
        child: SwitchablePadding(
          padding: _padding,
          child: Container(
            color: Theme.of(context).colorScheme.surface, // 设置表面颜色
            child: SwitchablePadding(
              padding: _padding,
              child: Container(
                color: Theme.of(context).colorScheme.surfaceVariant, // 设置表面变体颜色
                child: SwitchablePadding(
                  padding: _padding,
                  child: Container(
                    color: Theme.of(context).colorScheme.tertiary, // 设置第三色系颜色
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}