Flutter界面缩放设计插件scale_design的使用

Flutter界面缩放设计插件scale_design的使用

1. 安装

要使用此插件，可以在项目中运行以下命令：

flutter pub add scale_design

这将会自动安装最新版本到您的项目中。

2. 使用

1. 尺寸工具集的使用

初始化Scale类

在使用缩放功能之前，需要使用所需的屏幕宽度和高度值初始化Scale类。通常情况下，应该在应用的主文件或应用早期部分进行初始化。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 初始化Scale类并设置标准屏幕尺寸
    Scale().init(context, 375.0, 812.0);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('缩放设计示例'),
        ),
        body: Center(
          child: Container(
            width: scaleWidth(200), // 缩放后的宽度
            height: scaleHeight(100), // 缩放后的高度
            color: Colors.blue,
            child: Center(
              child: Text(
                '响应式文本',
                style: TextStyle(
                  fontSize: scaleWidth(16), // 缩放后的字体大小
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

在这个示例中，布局尺寸和字体大小根据当前屏幕尺寸按比例缩放，从而创建了一个响应式的设计。

缩放函数

一旦Scale类被初始化，您可以使用提供的缩放函数来根据屏幕大小调整布局。例如，要缩放一个高度值：

double scaledHeight = scaleHeight(50); // 根据屏幕大小缩放高度

同样地，您可以缩放宽度、获取屏幕宽度或高度的比例，并根据不同的设备自定义布局。

double scaledWidth = scaleWidth(100); // 根据屏幕大小缩放宽度
double oneThirdScreenWidth = perWidth(3); // 获取屏幕宽度的三分之一
double oneFifthScreenHeight = perHeight(5); // 获取屏幕高度的五分之一

2. 响应式工具集的使用

响应式组件

响应式组件是一种用于在Flutter应用程序中实现响应式布局的工具。它允许开发者根据用户设备的屏幕宽度显示不同的布局，支持移动设备、平板电脑和桌面。通过为移动设备、平板电脑和桌面提供不同的部件，可以为不同的屏幕尺寸定制布局。

使用方法

1. 定义布局：首先，为不同类型的设备定义布局。这意味着您需要准备三个部件，每个部件对应移动设备、平板电脑和桌面。
2. 使用响应式组件：在界面上使用响应式组件，并传递之前定义的布局部件。

示例

假设您有三个布局部件：MobileLayout、TabletLayout 和 DesktopLayout。您可以这样使用响应式组件：

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Responsive(
        mobile: MobileLayout(), // 移动设备布局
        tablet: TabletLayout(), // 平板设备布局
        desktop: DesktopLayout(), // 桌面设备布局
      ),
    );
  }
}

在大多数情况下，我们有移动设备和桌面设备的布局。平板设备的布局通常介于两者之间，可以替换其中任何一个，所以您不一定需要显式指定 <code>tablet</code> 选项；它会自动使用 <code>desktop</code> 选项的值。

响应式Scaffold组件

ResponsiveScaffold 组件是一个基于双重导航栏的快速构建响应式应用的框架。

import 'package:flutter/material.dart';
import 'package:app_service/app_service.dart';
import 'package:scale_design/scale_design.dart';
import '../../widgets/hr_v.dart';

class IndexView extends StatelessWidget {
  static const String url = '/index';
  // 定义底部导航项
  final List<BottomNavigationBarItem> _navBarItems = const [
    BottomNavigationBarItem(
      icon: Icon(Icons.home_outlined),
      label: 'Home',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.library_music_outlined),
      label: 'Business',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.account_circle_outlined),
      label: 'School',
    ),
  ];

  // 定义对应的页面
  final List<Widget> _pages = const [
    Page1(),
    Page2(),
    Page3(),
  ];

  const IndexView({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ResposiveScaffold(
      pages: _pages,
      items: _navBarItems,
      appBar: AppBar(
        title: const Text('缩放设计响应式Scaffold示例'),
        actions: const [
          Wen(),
          HrV(),
          DarkModeSwitch(),
          HrV(),
          ThemeModal(),
        ],
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const Center(
      child: Text(
        'Page1',
        style: TextStyle(fontSize: 60),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const Center(
      child: Text(
        'Page2',
        style: TextStyle(fontSize: 60),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const Center(
      child: Text(
        'Page3',
        style: TextStyle(fontSize: 60),
      ),
    );
  }
}

3. 其他组件

SlideText组件

SlideText 是一个垂直滚动的文本部件。

例如：

SlideText(
  [
    '你有未读消息，请尽快处理1',
    '你有未读消息，请尽快处理2',
    '你有未读消息，请尽快处理3',
    '你有未读消息，请尽快处理4',
  ],
  // 默认向上滚动
  isScrollUp: true, 
)

效果如下：

您可以通过 fontSize 参数设置文本大小。这个大小已经基于 scaleFont 大小，因此不需要手动调用 fontSize。如果需要控制高度，可以指定 height 参数，也不需要手动调用 scaleHeight 参数。

ScrollableIconsCard组件

ScrollableIconsCard 是一个用于显示一组可水平滚动的图标卡片的组件。

例如：

// 定义一组图标及其点击回调
List<Map<String, Object>> datas = [
  {'img': 'assets/svgs/捡漏.svg', 'title': '捡漏', 'onTap': () => print('捡漏')},
  {'img': 'assets/svgs/摇现金.svg', 'title': '摇现金', 'onTap': () => print('捡漏')},
  {'img': 'assets/svgs/聚补贴.svg', 'title': '聚补贴', 'onTap': () => print('捡漏')},
  {'img': 'assets/svgs/领券中心.svg', 'title': '领券中心', 'onTap': () => print('捡漏')},
];

ScrollableIconsCard(
  datas: datas,
),

效果如下：

ScrollableIconsCard 组件的各种参数默认值如下：

其中宽度基于 scaleWidth，高度基于 scaleHeight。

提示

您可以在 scale design 示例 中找到更多示例，例如：

图片	动图

ShinyButton组件

具有光影效果的按钮可以通过指定一组颜色值来实现光和阴影动画，例如：

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: T(
          '光影按钮',
          fontSize: 18,
        ),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 当仅传递 onPressed 的时候
            ShinyButton(onPressed: () {}),

            const SizedBox(height: 30),

            // 如果没有任何参数则成为禁用状态
            ShinyButton(),

            const SizedBox(height: 30),

            // 你可以自定义圆角、颜色、子元素等参数
            ShinyButton(
              borderRadius: 20,
              colors: const [
                Color.fromARGB(255, 112, 255, 117),
                Color.fromARGB(255, 0, 81, 3),
                Color.fromARGB(255, 112, 255, 117),
              ],
              child: T(
                '自定义一些属性',
                color: Colors.amber,
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
              onPressed: () {
                print('Button Pressed');
              },
            ),

            const SizedBox(height: 30),

            // 使用 disabled 属性禁用按钮
            ShinyButton(
              borderRadius: 20,
              width: 300,
              colors: const [
                Color.fromARGB(255, 112, 255, 117),
                Color.fromARGB(255, 0, 81, 3),
                Color.fromARGB(255, 112, 255, 117),
              ],
              disabled: true,
              onPressed: () {},
              child: T(
                '使用 disabled 属性禁用按钮',
                color: Colors.white,
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
            ),

            const SizedBox(height: 30),

            // 一个登陆按钮的示例
            ShinyButton(
              borderRadius: 60,
              width: 310,
              colors: const [
                Color.fromARGB(255, 255, 224, 112),
                Color.fromARGB(255, 220, 77, 0),
                Color.fromARGB(255, 255, 224, 112),
              ],
              onPressed: () {},
              child: T(
                '登 陆',
                color: Colors.white,
                fontSize: 23,
                fontWeight: FontWeight.bold,
              ),
            ),
          ],
        ),
      ),
    );
  }
}