Flutter从零到∞学习笔记
有状态widget:StatefulWidget和无状态widget:StatelessWidget 前者不需要实现Widget build(BuildContext context)。
具体的选择取决于widget是否需要管理一些状态
在Dart语言中使用下划线前缀标识符,会强制其变成私有的。
Icons.favorite Icons类里面有很多默认图标
isOdd 是否奇数 2.isOdd -> false 1.isOdd -> true
pushSaved “”开头的自动转成私有(方法和变量)
导航栏添加按钮和事件
@overrideWidget build(BuildContext context) {return new Scaffold(appBar: new AppBar(title: new Text('Startup Name Generator'),actions: <Widget>[// AppBar 添加一个按钮 样式为list 事件是_pushSavednew IconButton(icon: new Icon(Icons.list), onPressed: _pushSaved)],),body: _buildSuggestions(),);}// tooltip 长时间按下的提示文字IconButton(icon: new Icon(Icons.search), tooltip: 'Search', onPressed: null)
- 界面跳转方法
Navigator.of(context).push(new MaterialPageRoute(builder: (context) {},),);
- 一行函数写法
// 多行void main() {runApp(new Center(child: new Text('Hello, world!',textDirection: TextDirection.ltr,),))}// 一行void main() => runApp(new MyApp());
// Material 是UI呈现的“一张纸”
请确保在pubspec.yaml文件中,将flutter的值设置为:uses-material-design: true。这允许我们可以使用一组预定义Material icons。
Row(横向排列)和Column(纵向排列)
child: new Row(children: <Widget>[new ...,new ...,new ...,],)
child: new Column(children: <Widget>[new ...,new ...,new ...,],),
cached_network_image 图片占位和淡入淡出
push
Navigator.push(context,new MaterialPageRoute(builder: (context) => new 新界面),);// 如果需要传值:新界面({Key key, @required this.接收字段的名字}) : super(key: key);popNavigator.pop(context);
dio网络请求 https://github.com/flutterchina/dio
import 'dart:convert'; // package将响应内容转化为一个json Map
// 使用fromJson工厂函数,将json Map 转化为一个Post对象
new Post.fromJson(json);
future参数是一个异步的网络请求
import 'dart:io'; // 添加请求的headers
// 长连接
import 'package:web_socket_channel/io.dart';import 'package:multi_server_socket/multi_server_socket.dart';
- // 网络请求
Future<Post> fetchPost() async {final response = await http.get('[http://jsonplaceholder.typicode.com/posts/1](http://jsonplaceholder.typicode.com/posts/1)');final responseJson = json.decode(response.body);return new Post.fromJson(responseJson);}// 请求添加headers/*Future<Post> fetchPost() async {final response = await http.get('[https://jsonplaceholder.typicode.com/posts/1](https://jsonplaceholder.typicode.com/posts/1)',headers: {HttpHeaders.AUTHORIZATION: "Basic your_api_token_here"},);final json = jsonDecode(response.body);return new Post.fromJson(json);}*/new FutureBuilder<Post>(future: fetchPost(),builder: (context, snapshot) {return new CircularProgressIndicator();})
- 长连接
// 连接长连接IOWebSocketChannel.connect('[ws://echo](ws://echo/).[websocket.org](http://websocket.org/)’)// 接收消息new StreamBuilder(stream: widget.channel.stream,builder: (context, snapshot) {return new Padding(child: new Text(snapshot.hasData ? '${snapshot.data}' : ''),padding: const EdgeInsets.symmetric(vertical: 20.0));})// 发送消息widget.channel.sink.add(_textController.text);// 关闭长连接widget.channel.sink.close();
- 在Flutter中添加资源和图片
https://flutterchina.club/assets-and-images/
- 标准widget:
Container添加 padding, margins, borders, background color, 或将其他装饰添加到widget.GridView将 widgets 排列为可滚动的网格.ListView将widget排列为可滚动列表Stack将widget重叠在另一个widget之上.Material Components:Card将相关内容放到带圆角和投影的盒子中。ListTile将最多3行文字,以及可选的行前和和行尾的图标排成一行
- pubspec.yaml中添加字体 注意缩进对齐 注意缩进对齐 注意缩进对齐
-asset 路径是与pubspec.yaml平级的文件路径flutter:# Include the Material Design fonts.uses-material-design: truefonts:- family: Rock Saltfonts:# [https://fonts.google.com/specimen/Rock+Salt](https://fonts.google.com/specimen/Rock+Salt)- asset: fonts/Arial-Unicode.ttf- family: VT323fonts:# [https://fonts.google.com/specimen/VT323](https://fonts.google.com/specimen/VT323)- asset: fonts/Arial-Unicode.ttf- family: Ewertfonts:# [https://fonts.google.com/specimen/Ewert](https://fonts.google.com/specimen/Ewert)- asset: fonts/Ewert-Regular.ttf
- 比如一个关闭按钮在
new Row(mainAxisAlignment: MainAxisAlignment.end, children: <Widget>[new FlatButton(onPressed: () {}, child: Icon(Icons.close))],);
- 分割线
new Divider(color: Colors.lightBlue,)
- 自定义Icon
new Image.asset(“图片路径", width: 20.0, height: 20.0,)
- 按钮宽高
001、new Padding(padding: new EdgeInsets.fromLTRB(48.0, 20.0, 48.0, 20.0),child: new Row(children: <Widget>[new Expanded(child:new RaisedButton(onPressed: (){},//设置控件的高度child: new Padding(padding: new EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),child: new Text("登录",style: TextStyle(color: Colors.white)),),color: Colors.brown,),),],),),002、new Container(width: MediaQuery.of(context).size.width - 48 * 2 ,padding: new EdgeInsets.only(top: 40.0),child: new RaisedButton(onPressed: (){},//设置控件的高度child: new Padding(padding: new EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),child: new Text("登录",style: TextStyle(color: Colors.white)),),color: Colors.brown,),),003、Widget _bigButton(String text, double lSpace, double rSpace) {return new Container(width: MediaQuery.of(context).size.width - lSpace - rSpace,height: 48.0,margin: new EdgeInsets.only(left: lSpace, right: rSpace),color: Colors.white54,padding: new EdgeInsets.only(top: 0.0),child: new RaisedButton(onPressed: (){print(text);},child: new Padding(padding: new EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 0.0),child: new Text(text,style: TextStyle(color: Colors.white)),),color: Colors.brown,),);}
- 设备尺寸
MediaQuery.of(context).size.width
- 设备像素密度
MediaQuery.of(context).devicePixelRatio
- 状态栏高度
MediaQuery.of(context).padding.top
担心键盘挡住控件,可以使用 SingleChildScrollView,将SingleChildScrollView当做容器。
一个超级简单界面
import 'package:flutter/material.dart';class RegisterPage extends StatelessWidget {@overrideWidget build(BuildContext context) {return new Scaffold(backgroundColor: Colors.black,body: new RegisterWidget(),);}}class RegisterWidget extends StatefulWidget {RegisterWidgetState createState() => RegisterWidgetState();}class RegisterWidgetState extends State<RegisterWidget> {@overrideWidget build(BuildContext context) {return new Text("RegisterPage", style: TextStyle(color: Colors.white),);}}
- Flutter 按钮总结
· InkWell // 纯文字按钮· OutLineButton // 边框按钮· IconButton // icon按钮·
- import 'package:flutter/services.dart';
TextFieldinputFormatters: <TextInputFormatter> [WhitelistingTextInputFormatter.digitsOnly,],
37 . 验证码按钮
new Positioned(child: new Container(width: 80.0,height: 27.0,alignment: Alignment.center,decoration: new BoxDecoration(border: new Border.all(color: Colors.white,width: 1.0,),borderRadius: new BorderRadius.circular(4.0),),child: InkWell(child: _mText(_verifyStr, 12.0),onTap: () {},),)),
- 倒计时方法
@overridevoid dispose() {super.dispose();_cancelTimer();}_startTimer() {if (_verifyStr == '重新发送' || _verifyStr == '获取验证码') {_seconds = 5;_timer = new Timer.periodic(new Duration(seconds: 1), (timer) {if (_seconds == 0) {_cancelTimer();return;}_seconds--;_verifyStr = '$_seconds(s)';setState(() {});if (_seconds == 0) {_verifyStr = '重新发送';}});}}_cancelTimer() {_timer?.cancel();}
- 富文本拼接: 协议
Widget _protocolWidget() {return new Container(child: new Row(children: <Widget>[new GestureDetector(onTap: () {print("选择");},child: Icon(Icons.add_alert, color: Colors.white),),new Text.rich(new TextSpan(text: '我已阅读并同意',style: new TextStyle(fontSize: 12.0,color: Colors.grey[500],fontWeight: FontWeight.w400,),children: [new TextSpan(recognizer: new TapGestureRecognizer()..onTap = () {print("《燎原用户服务协议》");},text: "《燎原用户服务协议》",style: new TextStyle(fontSize: 14.0,color: Color(0XFFB57A36),fontWeight: FontWeight.w400,),)])),],));}
- 阴影、圆角
new Card(elevation: 4.0,shape: new RoundedRectangleBorder(borderRadius: BorderRadius.only(topLeft: Radius.circular(16.0),topRight: Radius.circular(16.0),bottomLeft: Radius.circular(12.0),bottomRight: Radius.circular(2.0),)),child: new IconButton(icon: Icon(Icons.add), onPressed: () {}),)
- YYTabbarWidget
import 'package:flutter/material.dart';// with AutomaticKeepAliveClientMixinclass YYTabbarWidget extends StatefulWidget {List<Widget> tabItems = [];Widget title;List<Widget> tabViews = [];PageController pageController;final ValueChanged<int> onPageChanged;final Widget drawer;YYTabbarWidget({Key key,this.drawer,this.tabItems,this.title,this.tabViews,this.pageController,this.onPageChanged,}) : super(key: key);_YYTabbarWidgetState createState() => _YYTabbarWidgetState(drawer, title, tabItems, tabViews, pageController, onPageChanged);}class _YYTabbarWidgetState extends State<YYTabbarWidget> with SingleTickerProviderStateMixin {final Widget _title;final List<Widget> _tabViews;final List<Widget> _tabItems;final ValueChanged<int> _onPageChanged;final Widget _drawer;_YYTabbarWidgetState(this._drawer,this._title,this._tabItems,this._tabViews,this._pageController,this._onPageChanged,) : super();TabController _tabController;PageController _pageController;@overridevoid initState() {super.initState();_tabController = new TabController(length: _tabItems.length, vsync: this);}@overridevoid dispose() {_tabController.dispose();super.dispose();}_renderTab() {print(_tabItems);List<Widget> list = new List();for (int i = 0; i < _tabItems.length; i++) {list.add(new FlatButton(onPressed: () {print(i);_pageController.jumpTo(MediaQuery.of(context).size.width * i);}, child: _tabItems[I],));}return list;}@overrideWidget build(BuildContext context) {return new Scaffold(drawer: _drawer,appBar: new AppBar(title: _title,),body: new PageView(controller: _pageController,children: _tabViews,onPageChanged: (index) {_tabController.animateTo(index);_onPageChanged?.call(index);},),bottomNavigationBar: new Material(color: Colors.white,child: new TabBar(indicatorPadding: new EdgeInsets.only(top: 0.0),controller: _tabController,tabs: _renderTab(),indicatorColor: Colors.red,),),);}}
- ListView 添加刷新,当数量少的时候不能滚动
physics: new AlwaysScrollableScrollPhysics(), // 让ListView一直可以滚动
- tabView切换 子界面都会调用initState
解决:AutomaticKeepAliveClientMixinclass HomePageState extends State<HomePage> with AutomaticKeepAliveClientMixin {@overridebool get wantKeepAlive => true;}
- 路有跳转
///不带参数的路由表跳转Navigator.pushNamed(context,routeName);///跳转新页面并且替换,比如登录页跳转主页Navigator.pushReplacementNamed(context,routeName);///跳转到新的路由,并且关闭给定路由的之前的所有页面Navigator.pushNamedAndRemoveUntil(context,'/calendar',ModalRoute.withName('/'));///带参数的路由跳转,并且监听返回Navigator.push(context,newMaterialPageRoute(builder:(context)=>newNotifyPage())).then((res){///获取返回处理});
- flutter lib
cupertino_icons: ^0.1.2 #iconflutter_spinkit: "^2.1.0" # load more loading import 'package:flutter_spinkit/flutter_spinkit.dart';dio: x.x.x #无网络请求 import 'package:dio/dio.dart';
- dio网络请求示例
_dioRequest() async {Dio dio = new Dio();Response response;try {String url;var params; // 请求参数Options options; // 配置:超时,请求头,请求类型等response = await dio.request(url, data: params, options: options);} on DioError catch(e) {// 请求出错时,返回一个DioError对象}}
- build_runner的使用
1、在根目录运行2、一次性创建.g.dart文件 使用build 此时目录内不能有.g.dart文件3、watch是监听 有model类的文件创建 自动创建.g.dart文件flutter packages pub run build_runner buildflutter packages pub run build_runner watch
转载于:https://www.cnblogs.com/pythonClub/p/10559489.html
Flutter从零到∞学习笔记相关推荐
- SQL零基础学习笔记(一)
真的不知道我写了这么多不同的的学习笔记又没用..开始SQL零基础学习笔记 百度百科:SQL(Structured Query Language)结构化查询语言,是一种数据库查询和程序设计语言,用于存取 ...
- Spring5从零单排学习笔记【非常详细】
前排 自学网课笔记整理,初次发博,有错的地方各位多多指教. Spring5从零单排学习笔记 文章目录 前排 Spring5从零单排学习笔记 一.Spring5框架概述 二.★IOC容器(Inversi ...
- 【Java】Java零基础学习笔记
文章目录 前言 思维导图 前期准备 卸载JDK 安装JDK Hello,world 可能遇到情况 java程序运行机制 IDEA的安装 java基础部分 基础语法 运算符 包机制 javaDoc文档手 ...
- (Java零基础学习笔记)第二章 Java中的基本语法
前言: 大家好! 我是BA unravel .如果你想和我一起学习JAVA,欢迎大家一起来学习这个世界上最好的语言! 学习目标: 一周掌握 Java 入门知识 学习内容: 1. 搭建 Java 开发环 ...
- Docker零基础学习笔记
零基础学习Docker Docker官方文档 基础语法 docker pull: 从DockerHub上拉取镜像 $ docker pull ngnix Using default tag: late ...
- flutter基础 dart语言学习笔记
1.JIT(Just-In-Time 动态编译) 即时编译为什么能大幅度提升性能 JIT,即Just-in-time,动态(即时)编译,边运行边编译: https://book.flutterchin ...
- 零基础学习笔记 - ADF4159
目录 1.准备工作 1.1.前言 1.2.资料 1.3.介绍 1.4.应用 1.5.应用电路 2.ADF4159 2.1.功能框图 2.2.通信协议时序 2.2.寄存器 2.2.0.注意 2.2.1. ...
- HTML+CSS零基础学习笔记(五)— 模拟淘宝首页(静态)
内容概览 模拟淘宝首页(静态) 一.项目重难点 二.效果图及源码 模拟淘宝首页(静态) 一.项目重难点 样式重置:在实际开发过程中,我们往往会新建一个单独的CSS文件(reset.css),用于对应H ...
- 古月居《ROS入门21讲》零基础学习笔记
文章目录 前言 1.课程简介 2.Linux系统介绍及安装 3.Linux基础操作(操作集) 命令结构 常用命令 快捷操作 4.cpp&python极简基础(操作集) 简单对比 安装编译器 编 ...
- 统计学习基础:数据挖掘、推理和预测_百度零基础深度学习笔记(三) 波士顿房价预测...
波士顿房价预测 波士顿房价预测是一个经典的机器学习任务,期待构建一个房价预测模型,其数据中包含13个影响房价的因素和该类型房屋均价. 波士顿房价影响因素 数据预处理 数据预处理包括: 数据导入 数据形 ...
最新文章
- 开源纯C日志函数库iLOG3快速入门(八、如果你喜欢简单日志函数甚于日志函数库)...
- 山东省青岛市黄海学院计算机考试,2017年3月山东计算机等级考试考点联系方式...
- js日期格式判断(2018/01/30) -方法 小时分秒格式判断((HH:MM)
- struts-config.xml 中 action 与 forward 的重要属性
- wpf 按钮样式_键盘 | 01.在程序集间引用样式
- 变与不变: Undo构造一致性读的例外情况
- hibernate4中主要的配置文件配置
- CodeMirror自动提醒配置
- 简单的java项目中获取配置文件的值
- html5+JS调用手机摄像头扫码
- 这届年轻人,为什么越挣钱越穷?
- Python_高级特性
- 格式工厂 wav 比特率_TunesKit Audio Converter for Mac(音频格式转换软件)
- appium inspect session closed due to inactivity
- 华为手机 运行 linux,Linux 用户玩转华为手机之华为分享
- 【计算机网络】因特网概述
- BufferedImage是什么意思?
- 华盛顿大学计算机科学,华盛顿大学计算机科学与信息系统Computer Science and Information Systems世界排名2020年最新排名第18位(QS世界排名)...
- INCA官方手册阅读记录
- C语言求最大公约数(四种)