flutter 响应式布局的示例

当谈到Flutter的响应式布局，最常用的方式是使用Flutter的内置布局组件和弹性布局（Flex）来创建自适应的界面。下面是一个简单的示例，展示了如何使用Flutter实现响应式布局：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Responsive Layout Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Responsive Layout Demo'),
      ),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Expanded(
            flex: 2,
            child: Container(
              color: Colors.green,
              height: MediaQuery.of(context).size.height,
              child: Center(
                child: Text(
                  'Sidebar',
                  style: TextStyle(fontSize: 24),
                ),
              ),
            ),
          ),
          Expanded(
            flex: 3,
            child: Container(
              color: Colors.blue,
              height: MediaQuery.of(context).size.height,
              child: Center(
                child: Text(
                  'Main Content',
                  style: TextStyle(fontSize: 24),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

在上面的示例中，我们创建了一个简单的应用程序，包含一个侧边栏和主内容区域。使用`Row`和`Expanded`组件来实现响应式布局。`Row`将其子组件平均分配到可用空间中，使用`Expanded`来指定子组件的比例。

侧边栏和主内容区域的比例是2:3。我们使用`flex`属性来指定`Expanded`组件的比例，其中侧边栏的比例为2，主内容区域的比例为3。通过这种方式，无论屏幕大小如何，侧边栏和主内容区域都会以正确的比例进行布局。

希望这个示例能够帮助你理解Flutter中响应式布局的基本概念和用法。