首页 > 其他分享 >Flutter的FittedBox控件

Flutter的FittedBox控件

时间:2023-06-12 15:04:05浏览次数:44  
标签:控件 FittedBox 可用 height 空间 宽高比 Flutter BoxFit

简介

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,
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

标签:控件,FittedBox,可用,height,空间,宽高比,Flutter,BoxFit
From: https://blog.51cto.com/u_15777557/6462688

相关文章

  • WPF控件库之HandyControl
    HandyControl介绍HandyControl是一套WPF控件库,它几乎重写了所有原生样式,同时包含80余款自定义控件(正逐步增加)。安装使用github地址:https://github.com/HandyOrg/HandyControl官网地址:https://handyorg.github.io/......
  • flutter多端适配
    公司需要app能适配web端,而且样式得不一样,这时就需要:pubspec.yaml引入库 responsive_builder。代码引用 import'package:responsive_builder/responsive_builder.dart';ResponsiveBuilder使用如下,可以根据参数sizingInformation的deviceScreenType属性来判断设备环境,返回不......
  • WFP必须掌握的技能之自定义控件——实战:自制上传文件显示进度按钮
    自定义控件在WPF开发中是很常见的,有时候某些控件需要契合业务或者美化统一样式,这时候就需要对控件做出一些改造。目录按钮设置圆角按钮上传文件相关定义测试代码话不多说直接看效果默认效果:上传效果:按钮设置圆角因为按钮本身没有CornerRadius属性,所以只能重写Butto......
  • Flutter之视频播放Chewie
    Chewie简介Chewie是一个用于在Flutter应用中展示视频的插件。它基于video_player插件构建,提供了更多的功能和自定义选项,使视频播放更加灵活和易用。Chewie的使用Chewie的主要特点和功能Chewie的主要特点和功能包括:自定义控件:Chewie提供了一个内置的视频控制栏,其中包含播放/......
  • WPF控件库之Syncfusion
    参考文章:https://www.cnblogs.com/zh7791/p/14009262.htmlhttps://www.cnblogs.com/DotNeter-Hpf/p/16523758.htmlhttps://www.cnblogs.com/redmoon/p/4420942.htmlSyncfusion介绍Syncfusion提供了一个由兼容的开发人员控制套件,可嵌入的BI平台和业务软件组成的生态系统。它......
  • WPF 跨用户控件操作【总结】
    文章来源于ChatGPTWPF跨用户控件操作操作方法在WPF中,要实现跨用户控件操作,有以下几种方法可以考虑:使用共享资源:创建一个共享的ViewModel,它可以被多个用户控件引用和操作。在这种方式下,所有控件都可以通过绑定到ViewModel的属性来实现数据的共享和同步。当一个控件修改ViewMod......
  • DevExpress WPF功能区控件,更轻松创建商业应用工具栏!(上)
    DevExpressWPF的Ribbon、Toolbar和Menus组件以MicrosoftOffice为灵感,针对WPF开发人员进行了优化,可帮助您在段时间内模拟当今最流行的商业生产力应用程序。DevExpressWPF拥有120+个控件和库,将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpressWPF能创建有......
  • C# TextBox 控件添加提示
     //Lostfocus当一个控件失去焦点时触发,定义控件失去焦点时的方法this.textBox1.LostFocus+=newSystem.EventHandler(this.textBox1_LostFocus);//GotFocus是在一个对象得到焦点时发生,定义控件得到焦点时的方法this.textBox1.GotFocus+=newSystem.EventHandler(th......
  • linux环境下jenkins搭建过程+Flutter打包集成
    安装jenkins配置java环境,androidsdk环境,flutter环境配置flutter自动打包脚本安装jenkins1.下载jenkins安装包首先下载jenkins安装包,官网下载地址:https://www.jenkins.io/download/,如果嫌太慢可以使用镜像下载:http://mirrors.jenkins-ci.org/解压并安装jenkinsrpm-......
  • flutter 的 in_app_web_view实现下载功能
    flutter与前端交互,利用in_app_web_view实现下载功能:首先下载库,终端输入flutterpubaddflutter_inappwebview之后导出import'package:flutter_inappwebview/flutter_inappwebview.dart';即可使用。创建in_app_web_view:InAppWebView(initialOptions:InA......