flutter 实战 之 Row 和 Column 和 Expanded 布局

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Row 和 Column 实践'),
        ),
        body: LayoutBuilder(
          builder: (context, constraints) {
            return Row(
              children: <Widget>[
                // 左侧固定宽度的菜单
                ConstrainedBox(
                  constraints: BoxConstraints.tightFor(
                    width: 200,
                    height: constraints.maxHeight,
                  ),
                  child: Menu(),
                ),
                // 中间的主要内容区域
                Expanded(
                  child: Column(
                    children: <Widget>[
                      // 顶部固定高度的工具栏
                      ConstrainedBox(
                        constraints: BoxConstraints.tightFor(
                          height: 60,
                          width: constraints.maxWidth,
                        ),
                        child: Toolbar(),
                      ),
                      // 底部的可扩展区域
                      Expanded(
                        child: Content(),
                      ),
                    ],
                  ),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}
 
class Menu extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(color: Colors.green);
  }
}
 
class Toolbar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(color: Colors.blue);
  }
}
 
class Content extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(color: Colors.yellow);
  }
}

这段代码使用了LayoutBuilder来获取外部布局约束，并结合Row、Column和Expanded来创建一个具有固定宽度和可扩展区域的菜单栏，同时在菜单栏旁边提供了一个固定高度的工具条和可扩展的内容区域。这是一个典型的在Flutter中使用布局控件的实践。