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
                )
            ),
          ),
  • 相关阅读:
    mybatis 查询list,内容为null,但list的size 为1
    mysql 父子表 注意事项
    导入
    php生成签名及验证签名
    PHP通过OpenSSL生成证书、密钥并且加密解密数据,以及公钥,私钥和数字签名的理解
    PHP 做 RSA 签名 生成订单(支付宝例子)
    接口安全调用该怎么做?签名?证书?服务安全?
    PHP 以POST方式提交XML、获取XML,最后解析XML
    php 解析xml 的四种方法
    php 模拟POST提交的2种方法
  • 原文地址:https://www.cnblogs.com/yiweiyihang/p/11703817.html
Copyright © 2011-2022 走看看