写点什么

Flutter- 系列(四)基础 UI 实践,从外包月薪 5K 到阿里月薪 15K

用户头像
Android架构
关注
发布于: 刚刚

Scaffold.of(context).showSnackBar(snackBar);}


###二.从网络加载图片在 Flutter 中直接使用 Image.network 就可以加载图片了


import 'package:flutter/material.dart';


void main() => runApp(MyApp());


class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {var title = 'Web Images';


return MaterialApp(title: title,home: Scaffold(appBar: AppBar(title: Text(title),),body: Image.network('https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',),),);}}


该方法还可以直接加载 GIF 图片


Image.network('https://github.com/flutter/plugins/raw/master/packages/video_player/doc/demo_ipod.gif?raw=true',);


通过 placeholder 属性可以增加一个占位图:


FadeInImage.assetNetwork(placeholder: 'assets/loading.gif',image: 'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',);


值得注意的是用 Image.network 加载的图片并没有缓存,如果想加载图片并缓存,需要使用:


CachedNetworkImage(placeholder: CircularProgressIndicator(),imageUrl: 'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',);


如果对 Flutter 的图片缓存策略感兴趣,请继续关注本专栏,之后的文章中我会分享给大家


###三.动画本段只简单的介绍动画入门,之后有文章会详细介绍 Flutter 动画。上篇文章说到过在 Flutter 中所有的东西都是 Widget,包括动画也不例外,如果你想让某个 Widget 包含动画属性,那么你需要用 AnimatedOpacity 将其包裹起来,AnimatedOpacity 也是一个 Widget。


AnimatedOpacity(// If the Widget should be visible, animate to 1.0 (fully visible). If// the Widget should be hidden, animate to 0.0 (invisible).opacity: _visible ? 1.0 : 0.0,duration: Duration(milliseconds: 500),// The green box needs to be the child of the AnimatedOpacitychild: Container(width: 200.0,height: 200.0,color: Colors.green,),);


我们使用一个 StatefulWidget 来调用 setState()方法刷新_visible 的值,就能显示动画了,是不是很简单?


import 'package:flutter/material.dart';


void main() => runApp(MyApp());


class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {final appTitle = 'Opacity Demo';return MaterialApp(title: appTitle,home: MyHomePage(title: appTitle),);}}


// The StatefulWidget's job is to take in some data and create a State class.// In


《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开:qq.cn.hn/FTe 免费领取
复制代码


this case, our Widget takes in a title, and creates a _MyHomePageState.class MyHomePage extends StatefulWidget {final String title;


MyHomePage({Key key, this.title}) : super(key: key);


@override_MyHomePageState createState() => _MyHomePageState();}


// The State class is responsible for two things: holding some data we can// update and building the UI using that data.class _MyHomePageState extends State<MyHomePage> {// Whether the green box should be visible or invisiblebool _visible = true;


@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(widget.title),),body: Center(child: AnimatedOpacity(// If the Widget should be visible, animate to 1.0 (fully visible). If// the Widget should be hidden, animate to 0.0 (invisible).opacity: _visible ? 1.0 : 0.0,duration: Duration(milliseconds: 500),// The green box needs to be the child of the AnimatedOpacitychild: Container(width: 200.0,height: 200.0,color: Colors.green,),),),floatingActionButton: FloatingActionButton(onPressed: () {// Make sure we call setState! This will tell Flutter to rebuild the// UI with our changes!setState(() {_visible = !_visible;});},tooltip: 'Toggle Opacity',child: Icon(Icons.flip),), // This trailing comma makes auto-formatting nicer for build methods.);}}

用户头像

Android架构

关注

还未添加个人签名 2021.10.31 加入

还未添加个人简介

评论

发布
暂无评论
Flutter-系列(四)基础UI实践,从外包月薪5K到阿里月薪15K