Flutter响应式布局插件responsive_kit的使用

Flutter响应式布局插件responsive_kit的使用

Responsive kit 是一个简化在 Flutter 中创建响应式 UI 的库。通过该库可以将设计文件中的特定屏幕尺寸转换为适应不同屏幕尺寸的响应式布局。

如上图所示，蓝色正方形和圆形周围的边距是恒定的，这些控件会根据黑色矩形进行调整。

目录

• 初始化
• 获取值
• 在小部件中使用
• 其他功能

初始化

在 main.dart 文件中的 build 方法下初始化 SizeConfig.init。

SizeConfig().init(context, height, width);

获取值

这些函数根据屏幕大小返回响应式的值，类型为 double。

• 高度
• 宽度
• 字体大小
• 底部边距

SizeConfig().getMyDynamicHeight(heightInDesignFile, maxlimit: maxlimit);
SizeConfig().getMyDynamicFontSize(fontSizeInDesignFile, maxlimit: maxlimit);
SizeConfig().getMyDynamicWidth(widthInDesignFile, maxlimit: maxlimit);
SizeConfig().getBottomMarginforBigScreens();

在小部件中使用

Container(
  height: SizeConfig().getMyDynamicHeight(200),
  width: SizeConfig().getMyDynamicWidth(100),
  color: Colors.amber.shade100,
);

其他功能

SizeConfig.verticalBlock;
SizeConfig.horizontalBlock;
SizeConfig.screenHeight;
SizeConfig.screenWidth;
SizeConfig.statusBarPadding;

示例代码

以下是一个完整的示例项目，展示了如何使用 responsive_kit 库。

import 'package:flutter/material.dart';
import 'package:responsive_kit/responsive_kit.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: 'Responsive Kit: 测试项目',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const MyHomePage(title: 'Responsive Kit: 测试项目'),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  // 控制外层黑色方框的值，内部容器/圆形的值依赖于它
  double sliderValue = 1.0;
  // 设备的尺寸
  late double tempHeight;
  late double tempWidth;

  [@override](/user/override)
  Widget build(BuildContext context) {
    SizeConfig().init(context, MediaQuery.of(context).size.height, MediaQuery.of(context).size.width);

    // 获取设备的尺寸，以便示例项目使用
    tempHeight = SizeConfig.getMyDynamicHeight(MediaQuery.of(context).size.height) * 0.1 * (sliderValue);
    tempWidth = SizeConfig.getMyDynamicWidth(MediaQuery.of(context).size.width) * 0.1 * (sliderValue);

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Stack(
              alignment: AlignmentDirectional.center,
              children: [
                SizedBox(
                  height: SizeConfig.screenHeight * 0.8,
                ),
                Container(
                  height: tempHeight,
                  width: tempWidth,
                  color: Colors.black38,
                  child: Container(
                    margin: EdgeInsets.symmetric(
                      horizontal: SizeConfig.getMyDynamicWidth(20),
                      vertical: SizeConfig.getMyDynamicHeight(20),
                    ),
                    color: Colors.blue.shade400,
                    child: Container(
                      margin: EdgeInsets.symmetric(
                        horizontal: SizeConfig.getMyDynamicWidth(30),
                        vertical: SizeConfig.getMyDynamicHeight(30),
                      ),
                      decoration: const BoxDecoration(
                        color: Colors.white,
                        shape: BoxShape.circle,
                      ),
                    ),
                  ),
                ),
              ],
            ),
            Slider.adaptive(
              value: sliderValue,
              label: sliderValue.toString(),
              min: 1,
              max: 7,
              onChanged: (newValue) => setState(() => sliderValue = newValue),
            ),
          ],
        ),
      ),
    );
  }
}