zoukankan      html  css  js  c++  java
  • flutter container image FittedBox AspectRatio

    当container指定了大小时,里面放入图片后,图片是居中自适应的,根据图片的大小,垂直居中或者水平居中。因为Image的默认自适应就是Contain,

    BoxFit.Contain

    如果container中展示图片想按照更多的特性展示,可以在图片外面使用FittedBox,或者就直接使用图片自带的fit特性

    FittedBox是一个适应组件,可以对子元素按照某种适应性展示

      @override
      Widget build(BuildContext context) {
        return new Column(
          children: <Widget>[
     Container( 
           130.0,
          height: 130.0,
          child:  FittedBox(
         fit:BoxFit.cover ,
          child:Image.network('https://pic2.zhimg.com/50/v2-710b7a6fea12a7203945b666790b7181_hd.jpg'),)
      )
        ],);
      }

     image本身也具有各种适应特性

      @override
      Widget build(BuildContext context) {
        return new Column(
          children: <Widget>[
     Container( 
         child:  Image.network('https://pic2.zhimg.com/50/v2-710b7a6fea12a7203945b666790b7181_hd.jpg',
          130,height: 130,
         fit: BoxFit.cover,),
      
      )
        ],);
      }

     AspectRatio是一个比例约束组件

    比如我想展示一个banner,不知道屏幕的宽度,但是我想按照宽高比4/1的比例展示,再利用BoxFit.cover对图片做适应的处理

     AspectRatio(
        aspectRatio: 4.0/1.0,
        child: Container(
          child: Image.network(
            'https://pic2.zhimg.com/50/v2-6416ef6d3181117a0177275286fac8f3_hd.jpg',
            fit: BoxFit.cover,
            
            ),
          color: Colors.blue,),
        ),

  • 相关阅读:
    汉诺塔实现笔记
    python-nmap的函数学习
    字符串匹配的KMP算法(转)
    QT下的贪吃蛇
    PentestBox在win10里打不开工具
    Dalvik虚拟机执行流程图
    用dx生成dex时遇到class name does not match path
    python3 小工具
    python3的Cryptodome
    前端学习笔记 day02 CSS
  • 原文地址:https://www.cnblogs.com/njcxwz/p/10054702.html
Copyright © 2011-2022 走看看