Flutter Web：布局随浏览器大小自动缩放

2023-12-25 11:24:19

引言

Flutter Web 作为一种跨平台开发框架，允许开发者使用单一代码库为多种平台（包括 Web）构建应用程序。在 Web 开发中，响应式布局至关重要，它可以让应用程序在不同设备和屏幕尺寸上展现出良好的用户体验。

浏览器窗口大小改变时布局越界问题

当我们使用 Flutter Web 开发应用程序时，可能会遇到浏览器窗口大小改变时布局越界的问题。这是因为 Flutter Web 的默认布局模式是固定大小，当浏览器窗口的大小改变时，布局不会随之改变，这可能会导致内容被裁剪或出现滚动条。

使用 MediaQuery 来构建响应式布局

为了解决这个问题，我们可以使用 MediaQuery 来构建响应式布局。MediaQuery 可以获取设备或浏览器的屏幕信息，如屏幕宽度、高度和方向。我们可以利用这些信息来调整布局的大小，以适应不同的屏幕尺寸。

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth > 1200) {
          return _buildWideLayout();
        } else if (constraints.maxWidth > 800) {
          return _buildMediumLayout();
        } else {
          return _buildNarrowLayout();
        }
      },
    );
  }

  Widget _buildWideLayout() {
    return Row(
      children: [
        // 左侧边栏
        Expanded(
          flex: 1,
          child: Container(
            color: Colors.blue,
          ),
        ),

        // 主内容区
        Expanded(
          flex: 2,
          child: Container(
            color: Colors.white,
          ),
        ),

        // 右侧边栏
        Expanded(
          flex: 1,
          child: Container(
            color: Colors.green,
          ),
        ),
      ],
    );
  }

  Widget _buildMediumLayout() {
    return Column(
      children: [
        // 顶部导航栏
        Container(
          color: Colors.blue,
          height: 60,
        ),

        // 主内容区
        Expanded(
          child: Container(
            color: Colors.white,
          ),
        ),

        // 底部栏
        Container(
          color: Colors.green,
          height: 60,
        ),
      ],
    );
  }

  Widget _buildNarrowLayout() {
    return ListView(
      children: [
        // 顶部导航栏
        Container(
          color: Colors.blue,
          height: 60,
        ),

        // 主内容区
        Container(
          color: Colors.white,
        ),

        // 底部栏
        Container(
          color: Colors.green,
          height: 60,
        ),
      ],
    );
  }
}

在这个示例中，我们使用 LayoutBuilder 来获取设备或浏览器的屏幕信息，并根据屏幕的宽度来调整布局。当屏幕宽度大于 1200px 时，我们使用宽布局；当屏幕宽度在 800px 到 1200px 之间时，我们使用中布局；当屏幕宽度小于 800px 时，我们使用窄布局。

使用 Flex 来控制布局元素的比例

除了使用 MediaQuery 来构建响应式布局外，我们还可以使用 Flex 来控制布局元素的比例。Flex 是一种弹性布局模型，它允许我们指定布局元素的比例关系，这样当布局大小改变时，布局元素可以自动调整大小以保持比例关系。

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        return Row(
          children: [
            // 左侧边栏
            Expanded(
              flex: 1,
              child: Container(
                color: Colors.blue,
              ),
            ),

            // 主内容区
            Expanded(
              flex: 2,
              child: Container(
                color: Colors.white,
              ),
            ),

            // 右侧边栏
            Expanded(
              flex: 1,
              child: Container(
                color: Colors.green,
              ),
            ),
          ],
        );
      },
    );
  }
}