zoukankan      html  css  js  c++  java
  • flutter的 图片组件基本使用

    import 'package:flutter/material.dart';
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      const MyApp({Key key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(
              title: Text("flutter demo"),
            ),
            body: HomeContent(),
          ),
        );
      }
    }
    
    class HomeContent extends StatelessWidget {
      const HomeContent({Key key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return Center(
          child: Container(
             300,
            height: 300,
            
             child: Image.network(
               "https://www.itying.com/images/201905/thumb_img/1101_thumb_G_1557845381862.jpg",
               alignment: Alignment.bottomRight,
               color: Colors.green,
               colorBlendMode: BlendMode.screen,
               // fit: BoxFit.cover,
               repeat: ImageRepeat.repeatX,
            ),
    
          ),
        );
      }
    }

    给container设置背景图片或者说是设置圆形图片

    Widget build(BuildContext context) {
        return Center(
          child: Container(
             300,
            height: 300,
            decoration: BoxDecoration(
                color: Colors.red,
                borderRadius: BorderRadius.circular(150),//设置圆形:
                image:DecorationImage(
                  image: NetworkImage("https://www.itying.com/images/201905/thumb_img/1101_thumb_G_1557845381862.jpg"),
                  fit: BoxFit.cover
                )
            ),
          ),
        );
      }
      Widget build(BuildContext context) {
        return Center(
          child: Container(
            child: ClipOval(
              child: Image.network(
                "https://www.itying.com/images/201905/thumb_img/1101_thumb_G_1557845381862.jpg",
                height: 100,
                 100,
                fit: BoxFit.cover,
              ),
            ),
          ),
        );
      }

    设置圆形:

    child: Container(
             300,
            height: 300,
            decoration: BoxDecoration(
                color: Colors.red,
                // borderRadius: BorderRadius.all(Radius.circular(150)), //设置圆形:
                borderRadius: BorderRadius.circular(150),//设置圆形:
                image:DecorationImage(
                  image: NetworkImage("https://www.itying.com/images/201905/thumb_img/1101_thumb_G_1557845381862.jpg"),
                  fit: BoxFit.cover
                )
            ),
          ),
  • 相关阅读:
    php 计算时间添加
    微信网页授权
    微信抢红包微信 PHP代码实现
    微信中禁止长按复制的代码
    【转】java内存分配和String类型的深度解析
    【转】java中创建对象的方法
    【转】深入理解Java的接口和抽象类
    【转】Java 字节流与字符流的区别
    【转】Java并发编程:Thread类的使用
    【转】深入理解java异常处理机制
  • 原文地址:https://www.cnblogs.com/yiweiyihang/p/11703817.html
Copyright © 2011-2022 走看看