面试题：Flutter布局类Widgets在响应式设计中的深度应用

布局策略

基于MediaQuery获取屏幕信息：通过MediaQuery类可以获取设备屏幕的尺寸、方向等信息，根据这些信息来调整布局。例如，判断屏幕宽度来决定是显示单列布局还是多列布局。
使用弹性布局：避免使用固定尺寸，多使用Flex、Expanded等组件来使子组件按比例分配空间，以适应不同屏幕大小。
断点设计：类似于网页开发中的断点，根据不同的屏幕宽度范围，采用不同的布局方式。比如，在手机屏幕较窄时使用列表布局，在平板或桌面端较宽屏幕时使用网格布局。

关键Widgets及组合方式

Row和Column：这两个是最基础的线性布局组件。Row用于水平排列子组件，Column用于垂直排列子组件。可以通过mainAxisAlignment和crossAxisAlignment属性来控制子组件的对齐方式。例如：

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)

Flex和Expanded：Flex是Row和Column的基础组件，Expanded用于在Flex布局中按比例分配剩余空间。比如在一个Row中有两个按钮，一个按钮固定宽度，另一个按钮占据剩余空间：

Row(
  children: [
    ElevatedButton(
      onPressed: () {},
      child: Text('固定按钮'),
    ),
    Expanded(
      child: ElevatedButton(
        onPressed: () {},
        child: Text('扩展按钮'),
      ),
    ),
  ],
)

LayoutBuilder：这个组件可以获取父组件的约束信息，根据父组件的可用空间来动态调整布局。例如，在一个卡片组件中，根据卡片的宽度来决定图片和文字的排列方式：

LayoutBuilder(
  builder: (BuildContext context, BoxConstraints constraints) {
    if (constraints.maxWidth > 400) {
      return Row(
        children: [
          Image.asset('assets/image.jpg'),
          Expanded(
            child: Text('一些文字描述'),
          ),
        ],
      );
    } else {
      return Column(
        children: [
          Image.asset('assets/image.jpg'),
          Text('一些文字描述'),
        ],
      );
    }
  },
)

ResponsiveBuilder（需引入flutter_screenutil库）：这个组件可以更方便地实现响应式布局。首先引入库：

dependencies:
  flutter_screenutil: ^5.0.2

然后使用ResponsiveBuilder：

import 'package:flutter_screenutil/flutter_screenutil.dart';

ResponsiveBuilder(
  builder: (context, sizingInformation) {
    if (sizingInformation.deviceScreenType == DeviceScreenType.mobile) {
      return Column(
        children: [
          Text('手机布局'),
        ],
      );
    } else if (sizingInformation.deviceScreenType == DeviceScreenType.tablet) {
      return Row(
        children: [
          Text('平板布局'),
        ],
      );
    } else {
      return GridView.count(
        crossAxisCount: 3,
        children: [
          Text('桌面端布局'),
        ],
      );
    }
  },
)

完整实现思路及示例代码

实现思路：
- 首先，通过MediaQuery或者ResponsiveBuilder获取屏幕信息。
- 根据屏幕信息（如宽度、设备类型等），采用不同的布局方式，如线性布局、弹性布局、网格布局等。
- 合理组合使用上述关键Widgets，以达到灵活且高效的响应式设计。
示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      designSize: const Size(360, 690),
      builder: () => MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text('响应式布局示例'),
          ),
          body: ResponsiveBuilder(
            builder: (context, sizingInformation) {
              if (sizingInformation.deviceScreenType == DeviceScreenType.mobile) {
                return Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Image.asset('assets/mobile_image.jpg'),
                    Text(
                      '这是手机屏幕布局',
                      style: TextStyle(fontSize: 20.sp),
                    ),
                  ],
                );
              } else if (sizingInformation.deviceScreenType == DeviceScreenType.tablet) {
                return Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Image.asset('assets/tablet_image.jpg'),
                    SizedBox(width: 20.w),
                    Text(
                      '这是平板屏幕布局',
                      style: TextStyle(fontSize: 24.sp),
                    ),
                  ],
                );
              } else {
                return GridView.count(
                  crossAxisCount: 3,
                  children: List.generate(9, (index) {
                    return Card(
                      child: Center(
                        child: Text(
                          'Item $index',
                          style: TextStyle(fontSize: 28.sp),
                        ),
                      ),
                    );
                  }),
                );
              }
            },
          ),
        ),
      ),
    );
  }
}

在上述代码中，通过flutter_screenutil库的ResponsiveBuilder来判断设备类型，然后针对手机、平板和桌面端分别采用不同的布局方式展示不同的内容。同时使用ScreenUtil的sp和w等方法来实现字体大小和间距等的自适应。

星途面试题库

面试题：Flutter布局类Widgets在响应式设计中的深度应用

知识考点

面试题答案

布局策略

关键Widgets及组合方式

完整实现思路及示例代码