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
                )
            ),
          ),
  • 相关阅读:
    iOS系列译文:自定义Collection View布局
    iOS系列译文:整洁的表视图代码
    各种类型的电影排行榜-movie路线
    学习正则
    sublime text 配置golang开发环境
    百度地图 Javascript API 笔记
    Sublime Text 3 若干问题解决办法
    无法修改系统Host的解决办法
    守望先锋overwatch美服外服设置方法
    Steam游戏黑屏与游戏直接安装方法
  • 原文地址:https://www.cnblogs.com/yiweiyihang/p/11703817.html
Copyright © 2011-2022 走看看