go to index

获取和设置布局约束

read time 1 min read
flutter tutorials flutter layout

获取布局约束

我们可以通过LayoutBuilder来获取父组件传递的布局的约束信息

dart
import 'package:flutter/material.dart';

void main() {
  runApp(
    Container(
      color: Colors.red[200],
      child: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
          print('constraints $constraints');
          return const Center(
            child: FlutterLogo(
              size: 50,
            ),
          );
        },
      ),
    ),
  );
}

设置布局约束

我们可以通过ConstrainedBox来设置向子组件传递的约束信息

dart
import 'package:flutter/material.dart';

void main() {
  runApp(
    Container(
      color: Colors.red[200],
      child: ConstrainedBox(
        constraints: const BoxConstraints(
          minWidth: 0,
          maxWidth: 400,
          maxHeight: 0,
          minHeight: 400,
        ),
        child: LayoutBuilder(
          builder: (BuildContext context, BoxConstraints constraints) {
            print('constraints $constraints');
            return const Center(
              child: FlutterLogo(
                size: 50,
              ),
            );
          },
        ),
      ),
    ),
  );
}