Flutter基础控件 Image

Flutter基础控件 Image

/// 图片案例
class ImageDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column( // 纵向容器
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Container(
          width: 300,
          height: 300,
          color: Colors.lightBlue,
          child: Image.network(
            "https://www.baidu.com/img/baidu_jgylogo3.gif",
            fit: BoxFit.fill, // 图片的显示方式
          ),
        ),
        Container(
          width: 100,
          height: 50,
        ),
        Text("BoxFit.fill", style:
        TextStyle(
            color: Colors.black,
            fontSize: 18
        ),)
      ],
    );
  }
}

fit属性的设置

• BoxFit.fill:全图显示，图片会被拉伸，并充满父容器。
  
• BoxFit.contain:全图显示，显示原比例，可能会有空隙。
  
• BoxFit.cover：显示可能拉伸，可能裁切，充满（图片要充满整个容器，还不变形）。
  
• BoxFit.fitWidth：宽度充满（横向充满），显示可能拉伸，可能裁切。
  
• BoxFit.fitHeight ：高度充满（竖向充满）,显示可能拉伸，可能裁切。
  
• BoxFit.scaleDown：效果和contain差不多，但是此属性不允许显示超过源图片大小，可小不可大。
  

图片的混合模式

/// 图片案例
class ImageDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column( // 纵向容器
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Container(
          width: 300,
          height: 300,
          color: Colors.lightBlue,
          child: Image.network(
            "https://www.baidu.com/img/baidu_jgylogo3.gif",
            color: Colors.yellow, // 需要混合的颜色
            colorBlendMode: BlendMode.colorDodge, // 混合的模式 
          ),
        ),
      ],
    );
  }
}

color 和 colorBlendMode 需要都设置缺一不可
效果

repeat图片重复

• ImageRepeat.repeat 横向和纵向都进行重复，直到铺满整个画布。
• ImageRepeat.repeatX 横向重复，纵向不重复。
• ImageRepeat.repeatY 纵向重复，横向不重复。

加载本地图片

• 创建文件夹 images,并在文件夹中添加 1.jpg文件
• 在pubspec.yaml 文件中添加类似如下代码：

  # To add assets to your application, add an assets section, like this:
  # assets:
  #  - images/a_dot_burr.jpeg
  #  - images/a_dot_ham.jpeg
  assets:
    - images/1.jpg

• 使用本地图片

/// 获取本地图片
class ImageAssetDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("加载本地图片"),),
      body: Center(
        child: Image.asset("images/1.jpg"),
      ),
    );
  }
}
``