• flutter image(本地调动和网络加载)


    本地使用需要注意:https://www.jianshu.com/p/fb878254b393

    import 'package:flutter/material.dart';
    
    void main() {
      runApp( MaterialApp(
        title: 'Flutter gesture',
        home: Widget_Image_Page(),
      ));
    }
    class Widget_Image_Page extends StatefulWidget{
      @override
      State<StatefulWidget> createState() {
        return new Widget_Image_State();
      }
    }
    
    class Widget_Image_State extends State<Widget_Image_Page> {
    
      var neturl = "https://bpic.588ku.com/PPt_origin_pic/pptyj/00/09/83/9f65ad5f03acc9b542629d3b445b9fbe.jpg";
      var gifurl = "https://bpic.588ku.com/PPt_origin_pic/pptyj/00/11/29/2086287a1b2df5c7dd7cf472d8259753.jpg";
      var tempUrl = "https://bpic.588ku.com/PPt_origin_pic/pptyj/00/09/67/5060abff381a0e0fb1a3d8c35a95941e.jpg";
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(
              title: Text("Image"),
            ),
            body: ListView(
              children: <Widget>[
                Image(
                  image: NetworkImage(tempUrl),
                ),
    
                Container(
                    color: Colors.grey,
                    child: Column(
                      children: <Widget>[
                        Container(
                          color: Colors.red,
                          margin: EdgeInsets.only(top: 20.0),
                          child: Image.network(neturl,
                             200.0,
                            height: 200.0,
                            fit: BoxFit.fill,
                          ),
                        ),
                        Container(
                          color: Colors.red,
                          margin: EdgeInsets.only(top: 20.0),
                          child: Image.network(neturl,
                             200.0,
                            height: 200.0,
                            fit: BoxFit.contain,
                          ),
                        ),
    
                        Container(
                          color: Colors.red,
                          margin: EdgeInsets.only(top: 20.0),
                          child: Image.network(neturl,
                             200.0,
                            height: 200.0,
                            fit: BoxFit.cover,
                          ),
                        ),
    
                        Container(
                          color: Colors.red,
                          margin: EdgeInsets.only(top: 20.0),
                          child: Image.network(neturl,
                             200.0,
                            height: 200.0,
                            fit: BoxFit.fitWidth,
                          ),
                        ),
    
                        Container(
                          color: Colors.red,
                          margin: EdgeInsets.only(top: 20.0),
                          child: Image.network(neturl,
                             200.0,
                            height: 200.0,
                            fit: BoxFit.fitHeight,
                          ),
                        ),
    
                        Container(
                          color: Colors.red,
                          margin: EdgeInsets.only(top: 20.0),
                          child: Image.network(neturl,
                             200.0,
                            height: 200.0,
                            fit: BoxFit.none,
                          ),
                        ),
    
                        Container(
                          color: Colors.red,
                          margin: EdgeInsets.only(top: 20.0),
                          child: Image.network(neturl,
                             200.0,
                            height: 200.0,
                            fit: BoxFit.scaleDown,
                          ),
                        ),
                        Container(
                          color: Colors.red,
                          margin: EdgeInsets.only(top: 20.0),
                          child: Image.network(gifurl,
                             200.0,
                            height: 200.0,
                          ),
                        ),
                      ],
                    )
                ),
    
                Container(
                  color: Colors.greenAccent,
                  child: Column(
                    children: <Widget>[
                      Container(
                        color: Colors.blue,
                        margin: EdgeInsets.only(top: 20.0),
                        child: Image.asset("res/images/ceshi_image1.jpg",
                           200.0,
                          height: 200.0,
                          repeat: ImageRepeat.repeat,
                        ),
                      ),
                      Container(
                        color: Colors.blue,
                        margin: EdgeInsets.only(top: 20.0),
                        child: Image.asset("res/images/ceshi_image1.jpg",
                           200.0,
                          height: 200.0,
                          repeat: ImageRepeat.repeatX,
                        ),
                      ),
                      Container(
                        color: Colors.blue,
                        margin: EdgeInsets.only(top: 20.0),
                        child: Image.asset("res/images/ceshi_image1.jpg",
                           200.0,
                          height: 200.0,
                          repeat: ImageRepeat.repeatY,
                        ),
                      ),
                      Container(
                        color: Colors.blue,
                        margin: EdgeInsets.only(top: 20.0),
                        child: Image.asset("res/images/ceshi_image1.jpg",
                           200.0,
                          height: 200.0,
                          repeat: ImageRepeat.noRepeat,
                          alignment: Alignment.bottomRight,
                        ),
                      ),
                    ],
                  ),
                ),
    
                Container(
                  color: Colors.orange,
                  child: Column(
                    children: <Widget>[
                      Container(
                        color: Colors.red,
                        margin: EdgeInsets.only(top: 20.0),
                        child: Image.network(tempUrl,
                           200.0,
                          height: 200.0,
                          gaplessPlayback: true,
                        ),
                      ),
                      Container(
                        color: Colors.red,
                        margin: EdgeInsets.only(top: 20.0),
                        child: Image.network(tempUrl,
                           200.0,
                          height: 200.0,
                          gaplessPlayback: false,
                        ),
                      ),
                      RaisedButton(
                        child: Text("点击改变图片地址"),
                        onPressed: (){
                          setState(() {
                            tempUrl =
                            "http://b.hiphotos.baidu.com/image/h%3D300/sign=ad628627aacc7cd9e52d32d909032104/32fa828ba61ea8d3fcd2e9ce9e0a304e241f5803.jpg";
                          });
                        },
                      ),
                    ],
                  ),
                ),
                Image.asset("res/images/ceshi_image3.jpg"),
    //            Image.file(File("")),
    //            Image.memory("")
              ],
            ),
          ),
        );
      }
    }

    跑起来吧少年

  • 相关阅读:
    SignalR 聊天室实例详解(服务器端推送版)
    一种解决图片防盗链的方法
    python3基础-数学运算
    测试开发之路
    页面加载时让其显示笼罩层与加载等待图片
    在SQL SERVER中获取表中的第二条数据
    html+js 的一些小问题
    数据库连接错误问题
    ObjectStateManager 中已存在具有同一键的对象。ObjectStateManager 无法跟踪具有相同键的多个对象。
    正则表达式实例
  • 原文地址:https://www.cnblogs.com/gaozhang12345/p/11984600.html
Copyright © 2020-2023  润新知