Flutter – LayoutBuilder 小部件

在Flutter， LayoutBuilder Widget 类似于 Builder 小部件，除了框架在布局时调用 builder函数并提供父小部件的约束。当父级限制子级的大小并且不依赖于子级的内在大小时，这很有用。 LayoutBuilder 的最终大小将与其子项的大小相匹配。

在以下情况下会调用 builder函数：

• 第一次布置小部件。
• 当父小部件传递不同的布局约束时。
• 当父小部件更新此小部件时。
• 当构建器函数订阅的依赖项发生变化时。

句法：

LayoutBuilder(
  builder: (BuildContext context, BoxConstraints constraints) {
    return Widget();
  }
)

单击以了解 BoxConstraints。

示例 1 ：使用父项的约束来计算子项的约束。 LayoutBuilder Widget 最常见的用例。

Dart

import 'package:flutter/material.dart';
  
void main() => runApp(MyApp());
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GeeksforGeeks',
  
      // to hide debug banner
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: HomePage(),
    );
  }
}
  
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text('GeeksforGeeks'),
        ),
        body: Container(
          color: Colors.red,
  
          /// Giving dimensions to parent Container
          /// using MediaQuery
          /// [container's height] = [(phone's height) / 2]
          /// [container's width] = [phone's width]
          height: MediaQuery.of(context).size.height * 0.5,
          width: MediaQuery.of(context).size.width,
  
          /// Aligning contents of this Container
          /// to center
          alignment: Alignment.center,
  
          child: LayoutBuilder(
            builder: (BuildContext ctx, BoxConstraints constraints) {
              return Container(
                color: Colors.green,
  
                /// Aligning contents of this Container
                /// to center
                alignment: Alignment.center,
  
                /// Using parent's constraints
                /// to calculate child's height and width
                height: constraints.maxHeight * 0.5,
                width: constraints.maxWidth * 0.5,
                child: Text(
                  'LayoutBuilder Widget',
                  style: TextStyle(
                    fontSize: 18,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

输出：

示例 2：我们还可以使用 LayoutBuilder Widget 为不同的屏幕尺寸显示不同的 UI。

Dart

import 'package:flutter/material.dart';
  
void main() => runApp(MyApp());
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GeeksforGeeks',
  
      // to hide debug banner
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: HomePage(),
    );
  }
}
  
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text('GeeksforGeeks'),
        ),
        body: Container(
  
          /// Giving dimensions to parent Container
          /// using MediaQuery
          /// [container's height] = [(phone's height) / 2]
          /// [container's width] = [phone's width]
          height: MediaQuery.of(context).size.height * 0.5,
          width: MediaQuery.of(context).size.width,
  
          /// Aligning contents of this Container
          /// to center
          alignment: Alignment.center,
  
          child: LayoutBuilder(
            builder: (BuildContext ctx, BoxConstraints constraints) {
                
              // if the screen width >= 480 i.e Wide Screen
              if (constraints.maxWidth >= 480) {
                return Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Container(
                      padding: const EdgeInsets.symmetric(horizontal: 8),
                      alignment: Alignment.center,
                      height: constraints.maxHeight * 0.5,
                      color: Colors.red,
                      child: Text(
                        'Left Part of Wide Screen',
                        style: TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.bold,
                          color: Colors.white,
                        ),
                      ),
                    ),
                    Container(
                      padding: const EdgeInsets.symmetric(horizontal: 8),
                      alignment: Alignment.center,
                      height: constraints.maxHeight * 0.5,
                      color: Colors.green,
                      child: Text(
                        'Right Part of Wide Screen',
                        style: TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.bold,
                          color: Colors.white,
                        ),
                      ),
                    ),
                  ],
                );
  
              // If screen size is < 480
              } else {
                return Container(
                  alignment: Alignment.center,
                  height: constraints.maxHeight * 0.5,
                  color: Colors.green,
                  child: Text(
                    'Normal Screen',
                    style: TextStyle(
                      fontSize: 18,
                      fontWeight: FontWeight.bold,
                      color: Colors.white,
                    ),
                  ),
                );
              }
            },
          ),
        ),
      ),
    );
  }
}

输出：

想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗?

单击此处前往由我们的专家精心策划的指南，旨在让您立即做好行业准备！