526互联

不知道父部件的尺寸，限制子部件的尺寸

发布时间 2023-12-19 22:18:40作者: 鲤斌

当不知道父部件的尺寸时，可以使用以下方法来限制子部件的尺寸：

使用FractionallySizedBox小部件

FractionallySizedBox根据父部件的尺寸的一部分来调整子部件的尺寸。widthFactor和heightFactor指定了子部件相对于父部件的宽度和高度的比例。

例如，widthFactor: 0.5表示子部件的宽度将是父部件宽度的50%。

优点：可以根据父部件的尺寸的一部分调整子部件的尺寸，无需直接指定具体的最小和最大约束。

缺点：子部件的尺寸会在每次父部件尺寸变化时重新计算，可能会引起性能消耗。

class MyVideo extends StatefulWidget {
  const MyVideo({super.key});

  @override
  State<MyVideo> createState() => _MyVideoState();
}

class _MyVideoState extends State<MyVideo> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: double.maxFinite,
      color: Colors.yellow,
      child: FractionallySizedBox(
        widthFactor: 0.5,
        heightFactor: 0.5,
        child: Container(
          color: Colors.red,
        ),
      ),
    );
  }
}

使用LayoutBuilder小部件

LayoutBuilder提供了父部件的约束条件，您可以根据这些约束条件动态设置子部件的尺寸。

优点：提供了很大的灵活性，可以根据父部件的约束条件动态计算和设置子部件的尺寸。

缺点：如果父部件的尺寸频繁变化，LayoutBuilder会在每次构建时重新计算子部件的尺寸，可能引起性能消耗。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'LayoutBuilder Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('LayoutBuilder Example'),
        ),
        body: Center(
          child: Container(
            color: Colors.blue,
            child: LayoutBuilder(
              builder: (BuildContext context, BoxConstraints constraints) {
                // 计算子组件的宽度和高度
                double width = constraints.maxWidth / 2;
                double height = constraints.maxHeight / 2;

                return Container(
                  width: width,
                  height: height,
                  color: Colors.red,
                  child: Center(
                    child: Text('Sub Widget'),
                  ),
                );
              },
            ),
          ),
        ),
      ),
    );
  }
}