Flutter多屏幕布局插件multi_screen_layout的使用

Flutter多屏幕布局插件multi_screen_layout的使用

multi_screen_layout 是一个用于Flutter应用程序的插件，旨在简化多屏幕用户界面的构建。它提供了一系列的Widget，使得开发者可以轻松地为不同类型的设备（如Surface Duo、Galaxy Z Fold等）创建适应多屏幕布局的应用程序。

支持的设备

• Surface Duo
• Surface Duo 2
• Galaxy Z Fold 1 (Flex Mode)
• Galaxy Z Fold 2 (Flex Mode)
• Galaxy Z Flip (Flex Mode)

安装

在 pubspec.yaml 文件中添加依赖：

dependencies:
  multi_screen_layout: ^3.1.0

在 app/build.gradle 文件中添加以下依赖：

dependencies { 
    implementation "androidx.window:window:1.0.0-rc01"
    implementation 'androidx.window:window-java:1.0.0-rc01'
}

测试

如果你没有物理设备，可以使用Android Studio中的特定模拟器进行测试：

• 6.7 Horizontal Fold-in 模拟器
• 7.6 Fold-in with outer display 模拟器
• 8 Fold-out 模拟器
• Surface Duo 模拟器

布局

TwoPageLayout

TwoPageLayout 用于在双屏设备上显示两个Widget，每个屏幕显示一个Widget。在折叠屏设备上，当屏幕可以分割为两个内容区域时，TwoPageLayout 会将两个Widget分别显示在两个内容区域中。在单屏设备或应用仅运行在一个屏幕上时，只会显示 child。

示例代码：

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return TwoPageLayout(
      child: Scaffold(
        body: Center(child: Text('Hello from page 1!')),
      ),
      secondChild: Scaffold(
        body: Center(child: Text('Hello from page 2!')),
      ),
    );
  }
}

Surface Duo 示例：

Samsung Z Fold 2 Flex Mode 示例：

查看视频

MasterDetailLayout

MasterDetailLayout 与 TwoPageLayout 类似，但它更适合用于主从视图布局，特别是在有相关“更深入”的内容时。例如，当你有一个项目列表，点击某个项目后可以查看该项目的详细信息。

在单屏设备或应用仅运行在一个屏幕上时，master 会首先显示。当 isSelected 为 true 时，detail 会作为新页面显示在 master 之上，类似于使用 Navigator.push。在双屏设备上，master 和 detail 会同时显示，不会发生导航。

示例代码：

class MasterDetailLayoutExample extends StatefulWidget {
  [@override](/user/override)
  _MasterDetailLayoutExampleState createState() => _MasterDetailLayoutExampleState();
}

class _MasterDetailLayoutExampleState extends State<MasterDetailLayoutExample> {
  int selectedItem;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MasterDetailLayout(
      master: EmailList(onItemSelected: (selected) {
        setState(() {
          selectedItem = selected;
        });
      }),
      detail: EmailDetail(itemNumber: selectedItem),
      isSelected: selectedItem != null,
    );
  }
}

Surface Duo 示例：

Samsung Z Fold 2 Flex Mode 示例：

查看视频

直接数据访问

对于高级用例，你可以直接访问多屏幕信息，而不仅仅是使用上述布局Widget。

MultiScreenInfo

MultiScreenInfo 是一个Widget，允许你在Widget树中直接访问设备信息，并在数据变化时自动重建。

示例代码：

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: MultiScreenInfo(
        builder: (info) {
          return Column(
            children: <Widget>[
              Text('The below information is from the Surface Duo SDK'),
              Text('isAppSpanned: ${info.surfaceDuoInfoModel.isSpanned}'),
              Text('hingeAngle: ${info.surfaceDuoInfoModel.hingeAngle}'),
            ],
          );
        },
      ),
    );
  }
}

PlatformHandlers

如果你需要在Widget树之外访问设备信息，可以使用平台调用。

SurfaceDuoPlatformHandler 示例：

Future getSurfaceDuoInfo() async {
  var hingeAngle = await SurfaceDuoPlatformHandler.getHingeAngle();
  var isDual = await SurfaceDuoPlatformHandler.getIsDual();
  var isSpanned = await SurfaceDuoPlatformHandler.getIsSpanned();
  var nonFunctionalBounds = await SurfaceDuoPlatformHandler.getNonFunctionalBounds();
}

完整示例Demo

下面是一个完整的示例应用，展示了如何使用 TwoPageLayout 和 MasterDetailLayout：

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

void main() {
  runApp(MaterialApp(home: MyApp()));
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return TwoPageLayout(
      child: MainPage(),
      secondChild: SecondPage(),
    );
  }
}

class MainPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Main Page'),
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text('This page always displays!'),
          ),
          Expanded(
            child: ListView(
              children: [
                ListTile(
                  title: Text('Two Page Layout Example'),
                  trailing: Icon(Icons.chevron_right),
                  onTap: () {
                    Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (_) => TwoPageLayoutExample()));
                  },
                ),
                ListTile(
                  title: Text('Master Detail Layout Example'),
                  trailing: Icon(Icons.chevron_right),
                  onTap: () {
                    Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (_) => MasterDetailLayoutExample()));
                  },
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  final bool showAppBar;

  const SecondPage({
    Key key,
    this.showAppBar = true,
  }) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: showAppBar
          ? AppBar(
              title: Text('Second Page'),
            )
          : null,
      backgroundColor: Colors.tealAccent,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(24),
              child: Text(
                'Hello from page 2! This only displays when spanned across 2 '
                'displays or the device posture is half opened. Also known as '
                'Samsung\'s Flex Mode.',
                textAlign: TextAlign.center,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class TwoPageLayoutExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return TwoPageLayout(
      child: Scaffold(
        body: Center(child: Text('Page 1')),
      ),
      secondChild: Scaffold(
        body: Center(child: Text('Page 2')),
      ),
    );
  }
}

class MasterDetailLayoutExample extends StatefulWidget {
  [@override](/user/override)
  _MasterDetailLayoutExampleState createState() => _MasterDetailLayoutExampleState();
}

class _MasterDetailLayoutExampleState extends State<MasterDetailLayoutExample> {
  int selectedItem;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MasterDetailLayout(
      master: EmailList(onItemSelected: (selected) {
        setState(() {
          selectedItem = selected;
        });
      }),
      detail: EmailDetail(itemNumber: selectedItem),
      isSelected: selectedItem != null,
    );
  }
}

class EmailList extends StatelessWidget {
  final Function(int) onItemSelected;

  EmailList({this.onItemSelected});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 10,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text('Email $index'),
          onTap: () => onItemSelected(index),
        );
      },
    );
  }
}

class EmailDetail extends StatelessWidget {
  final int itemNumber;

  EmailDetail({this.itemNumber});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Email Detail'),
      ),
      body: Center(
        child: Text('Detail for Email $itemNumber'),
      ),
    );
  }
}