Flutter的FittedBox控件

最新推荐文章于 2024-08-07 15:33:27 发布

江上清风山间明月

最新推荐文章于 2024-08-07 15:33:27 发布

阅读量1.7k

点赞数 1

分类专栏： Flutter 文章标签： flutter FitterBox 缩放

本文链接：https://blog.csdn.net/yikezhuixun/article/details/131168611

版权

Flutter 专栏收录该内容

135 篇文章

订阅专栏

FittedBox是Flutter的一个控件，用于调整子控件大小以适应可用空间。它依据子控件和空间大小自动缩放或拉伸，支持不同的BoxFit模式如contain、cover、fill等，以及子控件的对齐方式。此控件常用于图片和文本的自适应显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介

FittedBox是Flutter中的一个控件，它用于调整其子控件的大小以适应可用空间。它会根据子控件的大小和可用空间的大小，自动进行缩放或拉伸操作，以使子控件恰好填充可用空间。

属性

FittedBox的常用属性包括：

fit：指定子控件如何适应可用空间的枚举值。常用的取值有：

BoxFit.contain：将子控件缩放或拉伸到可用空间内，保持子控件的宽高比。如果子控件大小小于可用空间，则居中显示。
BoxFit.cover：将子控件缩放或拉伸到完全填充可用空间，保持子控件的宽高比。可能会裁剪子控件。
BoxFit.fill：将子控件拉伸到完全填充可用空间，不保持子控件的宽高比。
BoxFit.fitWidth：将子控件缩放到宽度与可用空间相等，保持宽高比。高度可能小于可用空间。
BoxFit.fitHeight：将子控件缩放到高度与可用空间相等，保持宽高比。宽度可能小于可用空间。
alignment：用于控制子控件在可用空间内的对齐方式，通常是一个Alignment对象。

使用FittedBox控件可以很方便地调整子控件的大小以适应可用空间，并灵活地控制子控件的缩放、拉伸和对齐方式。它常用于处理图片、文本或其他需要自适应大小的控件，以便在不同尺寸的父容器中正常显示。

举例

Widget build(BuildContext context) {
    debugPrint('Screen height: ${_videoPlayerController.value.size.height}');
    return Scaffold(
      backgroundColor: Colors.black,
      body: Stack(
        children: [
          Positioned(
            top: 0,
            left: 70*widget.horiRatio,
            child: Container(
              // height: MediaQuery.of(context).size.height,
              child: FittedBox(
                fit: BoxFit.none,
                child: SizedBox(
                  width: _videoPlayerController.value.size.width*widget.horiRatio,
                  height: _videoPlayerController.value.size.height*widget.verRatio,
                  child: Chewie(
                    controller: _chewieController,
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }