Flutter响应式布局插件responsiveui_container的使用

Responsive Container

此组件通过包装LayoutBuilder来提供一个响应式的容器。它可用于构建移动设备、平板电脑和桌面的布局。

• 移动端组件是必需的。
• 如果缺少平板组件，则会渲染移动端组件。
• 如果缺少桌面组件，则会渲染平板组件。
• 平板组件的默认最小宽度为800像素，桌面组件的默认最小宽度为1200像素。

使用

要使用此插件，添加responsiveui_container依赖项到你的pubspec.yaml文件中。

示例

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: '响应式容器演示',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: RContainer(
        mobile: MobileHomePage(),
        tablet: TabHomePage(),
        desktop: DesktopHomePage(),
      ),
    );
  }
}

class MobileHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("移动页面"),
      ),
      drawer: drawer(),
      body: Container(
        height: double.infinity,
        width: double.infinity,
        color: Colors.red,
      ),
    );
  }
}

class TabHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          drawer(),
          Expanded(
            child: Container(
              height: double.infinity,
              width: double.infinity,
              color: Colors.blue,
            ),
          ),
        ],
      ),
    );
  }
}

class DesktopHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          desktopMenu(),
          Expanded(
            child: Container(
              height: double.infinity,
              width: double.infinity,
              color: Colors.green,
            ),
          ),
        ],
      ),
    );
  }
}

Widget drawer() {
  return Drawer(
    child: ListView(
      children: [
        ListTile(
          leading: Icon(Icons.home),
          title: Text("首页"),
        ),
        ListTile(
          leading: Icon(Icons.person),
          title: Text("登录"),
        ),
        ListTile(
          leading: Icon(Icons.info),
          title: Text("关于"),
        ),
      ],
    ),
  );
}

Widget desktopMenu() {
  return Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: [
      TextButton(onPressed: () {}, child: Icon(Icons.home)),
      TextButton(onPressed: () {}, child: Icon(Icons.person)),
      TextButton(onPressed: () {}, child: Icon(Icons.info)),
    ],
  );
}

移动端

class MobileHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("移动页面"),
      ),
      drawer: drawer(),
      body: Container(
        height: double.infinity,
        width: double.infinity,
        color: Colors.red,
      ),
    );
  }
}

平板端

class TabHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          drawer(),
          Expanded(
            child: Container(
              height: double.infinity,
              width: double.infinity,
              color: Colors.blue,
            ),
          ),
        ],
      ),
    );
  }
}

桌面端

class DesktopHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          desktopMenu(),
          Expanded(
            child: Container(
              height: double.infinity,
              width: double.infinity,
              color: Colors.green,
            ),
          ),
        ],
      ),
    );
  }
}