Flutter代理布局插件proxy_layout的使用

Flutter代理布局插件proxy_layout的使用

proxy_layout 是一个用于根据设备大小或方向选择不同布局的 Flutter 插件。它允许你为移动设备和平板设备分别创建不同的布局，或者根据设备的方向（横屏或竖屏）来创建不同的布局。

使用方法

DeviceProxy

DeviceProxy 可以让你在移动设备和平板设备上使用不同的小部件。设备尺寸的分界点默认为 600 像素，你可以通过 threshold 参数覆盖这个值。

DeviceProxy(
  mobileBuilder: (context) => Text('Mobile widget'), // 移动设备布局
  tabletBuilder: (context) => Text('Tablet widget'), // 平板设备布局
)

如果你不想指定移动和平板设备的小部件，可以使用 builder 参数。这将使你能够通过 DeviceProxyType 枚举判断当前是移动设备还是平板设备。

DeviceProxy(
  builder: (context, deviceType) {
    switch (deviceType) {
      case DeviceProxyType.mobile:
        return Text('Mobile widget');
      case DeviceProxyType.tablet:
        return Text('Tablet widget');
    }
  }
)

此外，还提供了 isMobile 和 isTablet 静态方法，可以在需要时检查设备类型并调整某些属性。

OrientationProxy

OrientationProxy 可以让你在横屏和竖屏模式下使用不同的小部件。

OrientationProxy(
  landscapeBuilder: (context) => Text('Landscape widget'), // 横屏布局
  portraitBuilder: (context) => Text('Portrait widget'), // 竖屏布局
)

同样，你可以使用 builder 参数来获取当前的屏幕方向，并通过 DeviceOrientationType 枚举进行判断。

OrientationProxy(
  builder: (context, orientationType) {
    switch (orientationType) {
      case DeviceOrientationType.landscape:
        return Text('Landscape widget');
      case DeviceOrientationType.portrait:
        return Text('Portrait widget');
    }
  }
)

还提供了 isPortrait 和 isLandscape 静态方法，可以在需要时检查当前屏幕方向并调整某些属性。

LayoutProxy

LayoutProxy 可以同时处理设备类型和屏幕方向，让你在不同条件下使用不同的布局。

LayoutProxy(
  tabletPortraitBuilder: (context) => Text('Tablet portrait widget'), // 平板竖屏布局
  tabletLandscapeBuilder: (context) => Text('Tablet landscape widget'), // 平板横屏布局
  mobilePortraitBuilder: (context) => Text('Mobile portrait widget'), // 移动设备竖屏布局
  mobileLandscapeBuilder: (context) => Text('Mobile landscape widget'), // 移动设备横屏布局
)

设备尺寸的分界点默认为 600 像素，可以通过 threshold 参数覆盖这个值。

完整示例

下面是一个完整的示例，展示了如何结合 DeviceProxy 和 OrientationProxy 来创建适应不同设备和方向的布局。

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Proxy Layout Home Page'),
      ),
      body: DeviceProxy(
        mobileBuilder: (_) => OrientationProxy(
          landscapeBuilder: (_) => MyMobileLandscapeContent(),
          portraitBuilder: (_) => MyMobilePortraitContent(),
        ),
        tabletBuilder: (_) => OrientationProxy(
          landscapeBuilder: (_) => MyTabletLandscapeContent(),
          portraitBuilder: (_) => MyTabletPortraitContent(),
        ),
      ),
    );
  }
}

class MyMobilePortraitContent extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(child: Text('Mobile portrait content'));
  }
}

class MyMobileLandscapeContent extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(child: Text('Mobile landscape content'));
  }
}

class MyTabletPortraitContent extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(child: Text('Tablet portrait content'));
  }
}

class MyTabletLandscapeContent extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(child: Text('Tablet landscape content'));
  }
}