栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > CSS教程

Flutter 基础布局Widgets之FittedBox详解

CSS教程 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

Flutter 基础布局Widgets之FittedBox详解

FittedBox概述

FittedBox组件的作用是对child组件进行缩放和对齐方式的设置,其缩放的参数为fit,有多种选择的方式,而对齐方式alinment用法则和之前一致,即很多都是相通的。

FittedBox构造函数
const FittedBox({
    Key key,
    this.fit = BoxFit.contain,
    this.alignment = Alignment.center,
    Widget child,
  })
  • fit 即child的缩放方式,比如以下缩放方式:
    fill(通过扭曲源的纵横比填充目标框。):

contain(尽可能大,同时仍然将源完全包含在目标框中):

cover(尽可能小,同时仍然覆盖整个目标框):

fitWidth(确保显示了源的全部宽度,不管这是否意味着源垂直地溢出目标框):

fitHeight(确保显示源的完整高度,不管这是否意味着源水平地溢出目标框):

none(将源文件对齐到目标框内(默认情况下居中),并丢弃位于框外的源文件的任何部分。
源映像没有调整大小。):

scaleDown(将源文件对齐到目标框内(默认情况下,居中),如果需要,将源文件向下缩放,以确保源文件适合框内,这与contains相同,如果它会收缩图像,则它与none相同):

  • alignment child对齐方式
简单示例
// fittedBox
import 'package:flutter/material.dart';

class FittedBoxLearn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
 appBar: AppBar(
   title: Text('FittedBox'),
 ),
 body: Center(
   child: Container(
     width: 300,
     height: 400,
     decoration: BoxDecoration(
border: Border.all(), 

),
     // 根据内部child伸缩填充父容器
     child: FittedBox(
// 填充方式 比如contain 尽可能大,同时仍然将源完全包含在目标框中。  还有cover、fill、fitWidth、fitHeight等方式
fit: BoxFit.contain,
// 对齐方式
alignment: Alignment(0, 0),
child: Container(
  color: Colors.blueAccent,
  width: 30,
  height: 30,
)

     ),
   ),
 ));
  }
}

示例效果

转载请注明:文章转载自 www.mshxw.com
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号