Flutter流体布局插件fluido的使用

Flutter流体布局插件Fluido的使用

1. 安装

要使用Fluido插件，首先需要在pubspec.yaml文件中添加依赖：

dependencies:
  fluido: ^0.2.4

然后在命令行中运行以下命令来安装插件：

flutter pub get

2. 介绍

Fluido是一个简单且轻量级的包，用于高效地创建响应式和自适应的用户界面。它基于断点（sm、md、lg、xl、xl2）来选择不同的布局或样式。如果某个断点没有指定值，则会使用较低的非空值。

例如，如果你只指定了sm和lg，那么对于小屏幕尺寸，将使用sm的值；对于大屏幕及更大的尺寸，将使用lg的值。这种机制允许你逐步指定所需的值。

3. 断点和方向

• 断点：用于根据屏幕或窗口的宽度选择不同的值。常用的断点有sm（640px）、md（768px）、lg（1024px）、xl（1280px）、xl2（1536px）。
• 方向：用于根据屏幕的方向（横屏或竖屏）选择不同的值。可以使用ScreenOrientation和LayoutOrientation来实现。

4. 主要组件

ScreenSwitchValue

ScreenSwitchValue根据屏幕或窗口的宽度选择指定的值，并在尺寸变化时自动更新。它可以用于任何类型的值，例如颜色、字符串等。

Container(
  color: ScreenSwitchValue(
    context,
    sm: Colors.red,  // 小屏幕时使用红色
    lg: Colors.blue, // 大屏幕时使用蓝色
  ).value,
);

你也可以通过BuildContext直接访问ScreenSwitchValue：

Flex(
  direction: context.screenSwitchValue(
    sm: Axis.vertical,  // 小屏幕时使用垂直排列
    lg: Axis.horizontal, // 大屏幕时使用水平排列
  ),
  children: [
    // 子组件
  ],
);

ScreenWidth 和 LayoutWidth

ScreenWidth和LayoutWidth用于根据屏幕或父组件的宽度选择不同的子组件。ScreenWidth基于整个屏幕的宽度，而LayoutWidth则基于父组件的宽度。

ScreenWidth(
  sm: Container(
    child: Text('sm'),
  ),
  md: Container(
    child: Text('md'),
  ),
  lg: Container(
    child: Text('lg'),
  ),
  xl: Container(
    child: Text('xl'),
  ),
  xl2: Container(
    child: Text('xl2'),
  ),
);

你可以仅在某些断点显示特定的组件：

ScreenWidth(xl: Spacer())  // 仅在超大屏幕时显示Spacer

ScreenOrientation 和 LayoutOrientation

ScreenOrientation和LayoutOrientation用于根据屏幕或父组件的方向选择不同的子组件。

ScreenOrientation(
  portrait: Container(child: Text('portrait')),  // 竖屏时显示
  landscape: Container(child: Text('landscape')), // 横屏时显示
);

ScreenWidthWrap

ScreenWidthWrap根据屏幕或窗口的宽度选择由指定函数返回的组件。这个功能可以用于在某些断点下包装组件。

Flex(
  direction: context.screenSwitchValue(
    sm: Axis.vertical,
    lg: Axis.horizontal,
  ),
  children: [
    ScreenWidthWrap(
      lg: (content) => Flexible(child: content),  // 仅在大屏幕时使用Flexible包装
      content: ...,
    ),
  ],
),

FluidoSettings

你可以通过FluidoSettings全局修改断点的值：

void main() {
  FluidoSettings.breakpoints = const FluidoBreakpoints(
    sm: 768,
    md: 1024,
    lg: 1280,
    xl: 1536,
  );

  runApp(MyApp());
}

如果你想为某个特定的组件设置不同的断点值，可以使用breakpoints参数：

ScreenWidth(
  breakpoints: const FluidoBreakpoints(
    sm: 768,
    md: 1024,
    lg: 1280,
  ),
  sm: ...,
  md: ...,
);

5. 完整示例Demo

下面是一个完整的示例，展示了如何使用Fluido插件创建一个响应式的Flutter应用：

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

void main() {
  // 全局设置断点
  FluidoSettings.breakpoints = const FluidoBreakpoints(
    sm: 768,
    md: 1024,
    lg: 1280,
    xl: 1536,
  );

  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Fluido 示例',
      home: MyHomePage(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Fluido 示例'),
      ),
      body: Center(
        child: ConstrainedBox(
          constraints: BoxConstraints(
            maxWidth: FluidoSettings.breakpoints.xl.toDouble(),  // 限制最大宽度
          ),
          child: Column(
            children: [
              // 根据屏幕宽度显示不同颜色的容器
              ScreenWidth(
                sm: Container(
                  color: Colors.red,
                  child: const Text('sm'),
                ),
                md: Container(
                  color: Colors.green,
                  child: const Text('md'),
                ),
                lg: Container(
                  color: Colors.blue,
                  child: const Text('lg'),
                ),
                xl: Container(
                  color: Colors.yellow,
                  child: const Text('xl'),
                ),
                xl2: Container(
                  color: Colors.brown,
                  child: const Text('xl2'),
                ),
              ),
              
              // 根据屏幕方向显示不同的文本
              ScreenOrientation(
                portrait: Container(
                  color: Colors.white10,
                  child: const Text('portrait'),
                ),
                landscape: Container(
                  color: Colors.white24,
                  child: const Text('landscape'),
                ),
              ),
              
              // 仅在超大屏幕时显示Spacer
              const ScreenWidth(xl: Spacer()),
              
              // 使用Flex布局，根据屏幕宽度切换方向
              Expanded(
                child: Flex(
                  direction: context.screenSwitchValue(
                    sm: Axis.vertical,  // 小屏幕时垂直排列
                    lg: Axis.horizontal, // 大屏幕时水平排列
                  ),
                  children: [
                    Flexible(
                      child: FractionallySizedBox(
                        widthFactor: 1,
                        heightFactor: 1,
                        child: Container(color: Colors.black26),
                      ),
                    ),
                    Flexible(
                      flex: 2,
                      child: FractionallySizedBox(
                        widthFactor: 1,
                        heightFactor: 1,
                        child: Container(
                          color: ScreenSwitchValue(
                            context,
                            sm: Colors.black38,  // 小屏幕时使用黑色
                            lg: Colors.blue,     // 大屏幕时使用蓝色
                            xl2: Colors.brown,   // 超大屏幕时使用棕色
                          ).value,
                        ),
                      ),
                    ),
                    Flexible(
                      child: FractionallySizedBox(
                        widthFactor: 1,
                        heightFactor: 1,
                        child: Container(color: Colors.black45),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}