Flutter LayoutBuilder 的代码演示

15 min read

以下是一个简单的 Flutter LayoutBuilder 代码示例：

import 'package:flutter/material.dart';

class LayoutBuilderDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('LayoutBuilder Demo'),
      ),
      body: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
          return Container(
            alignment: Alignment.center,
            child: Text(
              'Container height: ${constraints.maxHeight}, width: ${constraints.maxWidth}',
              style: TextStyle(fontSize: 20),
            ),
          );
        },
      ),
    );
  }
}

在这个示例中，我们使用 LayoutBuilder 包装了一个 Container。LayoutBuilder 接收一个 builder 函数，该函数获取一个 BuildContext 和 BoxConstraints 对象作为参数，并返回一个 widget。在这个例子中，我们使用 constraints.maxHeight 和 constraints.maxWidth 属性来计算 and 显示 Container 的高度和宽度。

渲染效果如下所示：

LayoutBuilderDemo