Flutter如何实现响应式布局

在Flutter中，实现响应式布局主要依赖于以下几个关键组件和概念：

1. 使用MediaQuery获取屏幕尺寸

MediaQuery类提供了关于设备屏幕的各种信息，包括屏幕尺寸、方向、像素比等。

import 'package:flutter/material.dart';

class ResponsiveLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final screenSize = MediaQuery.of(context).size;
    final screenWidth = screenSize.width;
    final screenHeight = screenSize.height;

    return Container(
      color: Colors.blue,
      child: Center(
        child: Text('Screen Size: $screenWidth x $screenHeight'),
      ),
    );
  }
}

2. 使用LayoutBuilder

LayoutBuilder允许你根据父组件的约束条件来构建子组件。

import 'package:flutter/material.dart';

class ResponsiveLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth < 600) {
          return MobileLayout();
        } else {
          return DesktopLayout();
        }
      },
    );
  }
}

class MobileLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.green,
      child: Center(child: Text('Mobile Layout')),
    );
  }
}

class DesktopLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      child: Center(child: Text('Desktop Layout')),
    );
  }
}

3. 使用FractionallySizedBox

FractionallySizedBox允许你根据父组件的尺寸按比例缩放子组件。

import 'package:flutter/material.dart';

class ResponsiveLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Responsive Layout')),
      body: Center(
        child: FractionallySizedBox(
          widthFactor: 0.8,
          heightFactor: 0.5,
          child: Container(
            color: Colors.yellow,
            child: Center(child: Text('Fractionally Sized Box')),
          ),
        ),
      ),
    );
  }
}

4. 使用Flexible和Expanded

Flexible和Expanded组件可以帮助你在Flex布局中分配空间。

import 'package:flutter/material.dart';

class ResponsiveLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Responsive Layout')),
      body: Row(
        children: [
          Expanded(
            flex: 1,
            child: Container(
              color: Colors.purple,
              child: Center(child: Text('Left')),
            ),
          ),
          Expanded(
            flex: 2,
            child: Container(
              color: Colors.orange,
              child: Center(child: Text('Right')),
            ),
          ),
        ],
      ),
    );
  }
}

5. 使用AspectRatio

AspectRatio组件允许你为子组件设置固定的宽高比。

import 'package:flutter/material.dart';

class ResponsiveLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Responsive Layout')),
      body: Center(
        child: AspectRatio(
          aspectRatio: 16 / 9,
          child: Container(
            color: Colors.cyan,
            child: Center(child: Text('Aspect Ratio')),
          ),
        ),
      ),
    );
  }
}

6. 使用MediaQuery.of(context).orientation

你可以根据设备的方向（横屏或竖屏）来调整布局。

import 'package:flutter/material.dart';

class ResponsiveLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final orientation = MediaQuery.of(context).orientation;

    return Scaffold(
      appBar: AppBar(title: Text('Responsive Layout')),
      body: Center(
        child: Text(orientation == Orientation.portrait ? 'Portrait' : 'Landscape'),
      ),
    );
  }
}

通过结合这些组件和概念，你可以创建出适应不同屏幕尺寸和方向的响应式布局。