Flutter分屏显示插件flutter_split_view的使用

flutter_split_view 是一个基于 Navigator 2.0 的 Flutter 插件，它可以根据可用空间自动将屏幕分成两个视图。以下是如何使用该插件的详细说明和示例代码。

使用方法

Material 风格

MaterialApp(
  title: 'SplitView Demo',
  home: SplitView.material(
    child: MainPage(),
  ),
);

Cupertino 风格

CupertinoApp(
  title: 'SplitView Demo',
  home: SplitView.cupertino(
    child: MainPage(),
  ),
);

导航

推送页面

SplitView.of(context).push(SecondPage());

推送页面时可以设置一个可选的标题，该标题将在 Cupertino 风格中用作返回按钮的标题：

SplitView.of(context).push(
  SecondPage(),
  title: 'Second',
);

返回上一页

SplitView.of(context).pop();

返回到第 n 页：

SplitView.of(context).popUntil(1);

设置次级视图显示的页面

SplitView.of(context).setSecondary(SecondPage());

这将清除栈并推送新页面，使其成为栈中的第二页。

检查次级视图是否可见

SplitView.of(context).isSecondaryVisible;

示例代码

以下是一个完整的示例代码，展示了如何使用 flutter_split_view 插件：

// ignore_for_file: prefer_const_constructors, prefer_const_constructors_in_immutables

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: SplitView.material(
        child: MainPage(),
        placeholder: PlaceholderPage(),
      ),
    );
  }
}

class MainPage extends StatelessWidget {
  const MainPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('click'),
          onPressed: () {
            SplitView.of(context).setSecondary(
              SecondPage(),
              title: 'Second',
            );
          },
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  const SecondPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second'),
      ),
      body: Center(
        child: Builder(builder: (context) {
          return Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              ElevatedButton(
                child: Text('back'),
                onPressed: () {
                  SplitView.of(context).pop();
                },
              ),
              SizedBox(height: 16),
              ElevatedButton(
                child: Text('forward'),
                onPressed: () {
                  SplitView.of(context).push(
                    ThirdPage(),
                    title: 'Third',
                  );
                },
              ),
            ],
          );
        }),
      ),
    );
  }
}

class ThirdPage extends StatelessWidget {
  const ThirdPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Third'),
      ),
      body: Center(
        child: Builder(builder: (context) {
          return ElevatedButton(
            child: Text('back'),
            onPressed: () {
              SplitView.of(context).pop();
            },
          );
        }),
      ),
    );
  }
}

class PlaceholderPage extends StatelessWidget {
  const PlaceholderPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(
          'Click the button in main view to push to here',
          style: TextStyle(
            fontSize: 16,
            color: Colors.grey,
          ),
        ),
      ),
    );
  }
}

通过上述代码，你可以看到如何在主视图中点击按钮来显示次级视图，并在次级视图中进行导航操作。希望这些信息对你有所帮助！