LayoutBuilder.jpg
LayoutBuilder 可以在布局过程中拿到父组件传递的约束信息，然后我们可根据约束信息动态的构建不同的布局。
FittedBox 包裹的子组件会忽略其父组件传递的约束，即 FittedBox 传递给子组件的约束为（0<=width<=double.infinity, 0<=height<=double.infinity），不推荐使用。
//导入Material UI 组件库
import 'package:flutter/material.dart';
//程序入口
void main() {
runApp(const MaterialApp(
home: LayoutBuilderWidget(),
debugShowCheckedModeBanner: false,
));
}
class LayoutBuilderWidget extends StatelessWidget {
const LayoutBuilderWidget({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Column(
children: [
//获取父组件的约束信息[使用 LayoutBuilder 根据设备尺寸实现响应布]
LayoutBuilder(builder: (context, constraints) {
if (constraints.maxWidth < 200) {
return Text("$constraints");
} else {
return Text(
"$constraints",
style: const TextStyle(color: Colors.deepOrange),
);
}
}),
Container(
width: 50,
height: 50,
color: Colors.red,
child: FittedBox(
fit: BoxFit.cover,
//子容器超过父容器大小
child: Container(width: 60, height: 100, color: Colors.blue),
),
),
],
),
),
);
}
}
