hadss_adaptive_layout #

介绍 #

这是一个旨在解决Flutter多设备适配问题的三方库，为不同设备类型（包括折叠屏、平板、手机等）提供了便捷的支持。该库包含的接口和开箱即用的组件，使开发者能够轻松应对各种设备的布局适配需求。

目前该库提供的组件如下：

1. 断点相关组件：使用ArkUI断点能力开发的断点管理组件，能够让开发者直接使用ArkUI断点能力。
2. 自适应显隐容器：对标ArkUI的自适应显隐布局开发的容器，使开发者能够轻松的完成自适应显隐布局能力的开发。
3. 侧边栏组件：对标ArkUI的SideBarContainer组件开发的Flutter侧边栏组件，使开发者能够轻松的完成侧边栏相关布局能力的开发。
4. 自适应分栏组件：参考ArkUI的Navigation组件开发的Flutter分栏组件，使开发者能够轻松的完成分栏及路由跳转能力的开发。
5. 栅格组件：对标ArkUI的GridRow/GridCol开发的Flutter栅格组件，提供基础的栅格布局能力，使开发能够直接使用ArkUI栅格布局能力。

工程目录 #

.
├─example                             // example工程
│  └─lib
│     ├─pages
│     │   ├─breakpoint_page.dart        // 横纵向断点效果演示页
│     │   ├─grid_page.dart              // 栅格组件效果演示页
│     │   ├─display_priority_col_page.dart        // 自适应显隐组件纵向排列效果演示页
│     │   ├─display_priority_row_page.dart        // 自适应显隐组件横向排列效果演示页
│     │   ├─display_priority_page.dart            // 自适应显隐组件效果演示入口页
│     │   ├─navigation_split_page.dart            // 自适应导航分栏组件效果演示入口页
│     │   ├─side_bar_container_page.dart        // 自适应侧边栏组件效果演示入口页
│     │   └─home_page.dart              // 首页
│     ├─routes         
│     │   └─routers.dart                   // 路由配置   
│     ├─utils       
│     │   └─measure_size.dart              // 测量组件尺寸工具类    
│     └─main.dart                          // 工程入口              
│                   
├─lib
│  ├─src
│  │  ├─breakpoint           // 断点类
│  │  ├─grid                 // 栅格组件
│  │  ├─display_priority     // 自适应显隐组件
│  │  ├─navigation_split_container     // 自适应分栏组件
│  │  └─slider_bar_container           // 自适应侧边栏组件
│  └─multidevice_layout.dart                  // 多设备布局库

安装与使用 #

请拉取flutter_multidevice_layout_scenepkg 代码仓并执行flutter pub get。

进入到工程目录并输入以下命令：

运行前准备

flutter pub get
cd example

移动设备运行

flutter run

Web端运行

flutter run -d chrome --web-hostname=127.0.0.1

API #

说明： OpenHarmony: API >= 12 flutter版本: >= 3.7.12

断点 #

BreakpointManager断点管理单例

说明： 在ohos设备上，且api >= 13采用ohos动态断点能力，因此设置横向和纵向的断点区间将无效。

WidthBreakpoint 横向断点枚举

HeightBreakpoint 横向断点枚举

类WidthBreakpointRange横向断点区间，设置值为右边界

类HeightBreakpointRange纵向断点区间，设置值为右边界

类BreakpointData断点数据对象

下面的代码展示了断点库的使用方式：

/// 断点状态变量管理
class BreakpointProvider extends ChangeNotifier {
  WidthBreakpoint _widthBreakpoint = WidthBreakpoint.unknown;
  HeightBreakpoint _heightBreakpoint = HeightBreakpoint.unknown;

  BreakpointProvider() {
    _initBreakpoint();
  }

  Future<void> _initBreakpoint() async {
    final BreakpointData data = await BreakpointManager().init();
    _widthBreakpoint = data.widthBreakpoint;
    _heightBreakpoint = data.heightBreakpoint;
    BreakpointManager().addBreakpointCallback((breakpointData) {
      _widthBreakpoint = breakpointData.widthBreakpoint;
      _heightBreakpoint = breakpointData.heightBreakpoint;
      notifyListeners();
    });
  }

  WidthBreakpoint get widthBreakpoint => _widthBreakpoint;

  HeightBreakpoint get heightBreakpoint => _heightBreakpoint;
}

/// main文件初始化断点
void main() {
  WidgetsFlutterBinding.ensureInitialized();
  final breakpointProvider = BreakpointProvider();
  runApp(MultiProvider(
    providers: [
      ChangeNotifierProvider(create: (context) => RouteManager()),
      ChangeNotifierProvider(create: (context) => breakpointProvider)
    ],
    child: const MyApp(),
  ));
}

/// 断点页面使用刷新参数
@override
Widget build(BuildContext context) {
  return Consumer<BreakpointProvider>(
    builder: (context, provider, child) {
      _widthBp = provider.widthBreakpoint;
      _heightBp = provider.heightBreakpoint;
      blueCol = _widthMap[_widthBp]!;
      redCol = _heightMap[_heightBp]!;
      return _mainView(context);
    },
  );
}

栅格组件 #

下面的代码展示了Flutter栅格组件的使用方式：

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

class MyGrid extends StatefulWidget {
  const MyGrid({super.key});

  @override
  State<MyGrid> createState() => _MyGridState();
}

class _MyGridState extends State<MyGrid> with WidgetsBindingObserver {
  double _currentWidth = 0;
  List<GridCol> childList = [];

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
    childList.add(
      GridCol(
        span: SpanOption(xs: 1,
            sm: 1,
            md: 3,
            lg: 4,
            xl: 5,
            xxl: 6),
        offset: 0,
        order: 0,
        child: Container(
          color: Colors.blue,
          width: double.infinity,
          alignment: Alignment.center,
          child: const Text('1'),
        ),
      ),
    );
    for (int i = 0; i < 20; i++) {
      childList.add(
        GridCol(
          span: 1,
          offset: 0,
          order: (i + 1) % 3,
          child: Container(
            color: Colors.blue,
            width: double.infinity,
            alignment: Alignment.center,
            child: Text((i + 2).toString()),
          ),
        ),
      );
    }
    updateScreenSize();
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangeMetrics() {
    updateScreenSize();
  }

  void updateScreenSize() {
    final Size size = WidgetsBinding.instance.window.physicalSize;
    final double ratio = WidgetsBinding.instance.window.devicePixelRatio;
    setState(() {
      _currentWidth = size.width / ratio;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('栅格组件示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Text('当前屏幕宽度:$_currentWidth'),
            GridRow(
              gridCols: childList,
              columns: 12,
              gutter: const Gutter(x: 10, y: 8),
              margin: const EdgeInsets.all(0),
              range: BreakpointRange(
                list: [0, 320, 600, 840, 1440, 2000],
              ),
            )
          ],
        ),
      ),
    );
  }
}

自适应显隐组件 #

自适应显隐容器

显隐容器属性配置类

下面的代码展示了自适应显隐组件的使用方式：

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

class DisplayPriorityRowPage extends StatefulWidget {
  const DisplayPriorityRowPage({super.key});

  @override
  State<DisplayPriorityRowPage> createState() => _DisplayPriorityRowPageState();
}

class _DisplayPriorityRowPageState extends State<DisplayPriorityRowPage> {
  List<DisplayPriorityObject> childList = [];

  @override
  void initState() {
    super.initState();
    for (int i = 0; i < 60; i++) {
      childList.add(
        DisplayPriorityObject(
          displayPriority: i % 3 + 1,
          child: Text(
            (i % 3 + 1).toString(),
            style: const TextStyle(color: Colors.red, fontSize: 50),
          ),
        ),
      );
    }
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('显隐组件：水平效果'),
      ),
      body: SafeArea(
        child: DisplayPriorityBox(
          direction: Axis.horizontal,
          displayPriorityList: childList,
        ),
      ),
    );
  }
}

侧边栏组件 #

SideBarContainer

SideBarContainerType

SideBarContainerType

DividerStyle

ButtonStyle

下面的代码展示了侧边栏组件的使用方式：

import 'package:flutter/material.dart' hide ButtonStyle;
import 'package:hadss_adaptive_layout/hadss_adaptive_layout.dart';

class SliderBarContainerPage extends StatefulWidget {
  const SliderBarContainerPage({Key? key}) : super(key: key);

  @override
  State<SliderBarContainerPage> createState() => _SliderBarContainerPageState();
}

class _SliderBarContainerPageState extends State<SliderBarContainerPage> {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        return Scaffold(
          appBar: AppBar(
            title: const Text('SideBarContainer 示例'),
          ),
          body: SideBarContainer(
            sideBar: Container(
              color: Colors.blue,
              child: const Center(
                child: Text(
                  '侧边栏',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 18.0,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ),
            content: Container(
              color: Colors.grey,
              child: const Center(
                child: Text(
                  '内容区',
                  style: TextStyle(
                    color: Colors.black,
                    fontSize: 18.0,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ),
            type: SideBarContainerType.auto,
            showControlButton: true,
            showSideBar: true,
            sideBarWidth: 50.0,
            minSideBarWidth: 75.0,
            maxSideBarWidth: 100.0,
            minContentWidth: 200.0,
            autoHide: true,
            sideBarPosition: SideBarPosition.start,
            controlButton: const ButtonStyle(
                left: 16.0,
                top: 16.0,
                icons: ButtonIcons(
                    shown: Image(image: AssetImage('assets/show_all.png')),
                    hidden: Image(image: AssetImage('assets/show_all.png')))),
            divider: const DividerStyle(
              strokeWidth: 1.0,
              color: Colors.black,
              startMargin: 10.0,
              endMargin: 10.0,
            ),
            onChange: (isVisible) {
              print('isVisible: $isVisible');
            },
          ),
        );
      },
    );
  }
}

自适应分栏组件 #

NavigationSplitContainer

NavigationSplitMode

NavBarPosition

使用方式：

@override
Widget build(BuildContext context) {
  return NavigationSplitContainer(
      navBarWidth: 240,
      minContentWidth: 200,
      navBarWidthRange: const [200, 300],
      mode: NavigationSplitMode.auto,
      navBarPosition: NavBarPosition.start,
      navigationPane: const NavigationPage(),
      mainContent: const DetailsPage(),
      onNavBarStateChange: (bool isVisible) {
        print('onNavBarStateChange: $isVisible');
      },
      onNavigationModeChange: (NavigationSplitMode mode) {
        print('onNavigationModeChange: $mode');
      });
}