Flutter响应式布局设计教程

Flutter 提供了多种工具和组件来实现响应式布局，确保应用在不同屏幕尺寸和设备上都能良好显示。以下是实现响应式布局的几种常见方法：

1. 使用 MediaQuery

MediaQuery 可以获取设备的屏幕尺寸，根据屏幕宽度或高度调整布局。

import 'package:flutter/material.dart';

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

    if (screenWidth > 600) {
      return WideLayout();
    } else {
      return NarrowLayout();
    }
  }
}

class WideLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Wide Layout')),
      body: Center(child: Text('This is a wide layout')),
    );
  }
}

class NarrowLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Narrow Layout')),
      body: Center(child: Text('This is a narrow layout')),
    );
  }
}

2. 使用 LayoutBuilder

LayoutBuilder 可以根据父容器的约束条件动态调整布局。

import 'package:flutter/material.dart';

class ResponsiveLayoutBuilder extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth > 600) {
          return WideLayout();
        } else {
          return NarrowLayout();
        }
      },
    );
  }
}

3. 使用 Flexible 和 Expanded

Flexible 和 Expanded 可以用于在 Row 或 Column 中创建灵活的布局。

import 'package:flutter/material.dart';

class FlexibleLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flexible Layout')),
      body: Row(
        children: [
          Flexible(
            flex: 1,
            child: Container(color: Colors.red),
          ),
          Flexible(
            flex: 2,
            child: Container(color: Colors.blue),
          ),
        ],
      ),
    );
  }
}

4. 使用 OrientationBuilder

OrientationBuilder 可以根据设备的横竖屏状态调整布局。

import 'package:flutter/material.dart';

class OrientationLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return OrientationBuilder(
      builder: (context, orientation) {
        return orientation == Orientation.portrait
            ? PortraitLayout()
            : LandscapeLayout();
      },
    );
  }
}

class PortraitLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Portrait Layout')),
      body: Center(child: Text('This is portrait layout')),
    );
  }
}

class LandscapeLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Landscape Layout')),
      body: Center(child: Text('This is landscape layout')),
    );
  }
}

5. 使用 AspectRatio

AspectRatio 可以根据指定的宽高比调整子组件的大小。

import 'package:flutter/material.dart';

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

通过以上方法，你可以轻松实现 Flutter 应用的响应式布局，确保应用在不同设备上都能提供良好的用户体验。