[Flutter] 写第一个 Flutter app,part1 要点
模拟器中调试元素的布局:
Android Studio 右侧边栏 Flutter Inspector,选择 Toggle Debug Paint 打开。
格式化代码:
编辑器中右键 Reformat Code with dartfmt。
使用外部功能包(https://pub.dartlang.org/flutter):
把外部包名加到 pubspec.yaml 的 dependencies 依赖中,运行 flutter packages get 安装,代码中 import 进来使用。
例子内容解读(https://flutter.io/docs/get-started/codelab):
StatelessWidget 子 Widget 实现 build 方法,Stateless widget 是不变的,意思是它们的属性不能变 - 所有的值都是 final。
StatefulWidget 子 Widget 实现 createState 方法;Stateful widget 维护着 widget 生命周期内可能改变的状态。
实现一个 stateful widget 需要至少两个 class:
1)一个创建了 State 类实例的 StatefulWidget 类。
2)一个 State 类。
// 我们使用了一个 RandomWords 的 State 类,RandomWordsState 依赖 RandomWords 类。
class RandomWordsState extends State<RandomWords> {
// TODO 实现 build() 方法,返回 Scaffold
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Startup Name Generator'),
),
body: _buildSuggestions(),
);
} // 实现 Scaffold 里使用的私有 widget 功能,比如构建 ListView,ListView 构造方法允许我们构建一个按需加载的 list
// ListView 提供一个 builder 属性和 itemBuilder 方法,itemBuilder 是一个匿名函数形式的回调方法,传入 BuildContext 和 行索引号。
Widget _buildSuggestions() {
return ListView.builder(
padding: const EdgeInsets.all(16.0),
itemBuilder: /**/ (context, i) {
if (i.isOdd) return Divider(); /**/ final index = i ~/ 2; /**/
if (index >= _suggestions.length) {
_suggestions.addAll(generateWordPairs().take(10)); /**/
}
return _buildRow(_suggestions[index]);
});
}
/*1*/ itemBuilder回调在生成每个单词时调用一次,并替换 ListTile 行。偶数行为单词添加 ListTile,奇数行添加 Divider widget 垂直分隔实体。
/*2*/ 在 ListView 每行之前添加一个一像素高的 divider
/*3*/ 表达式 i ~/ 2,i 整除 2,返回整数的结果。如 1,2,3,4,5 变成 0,1,1,2,2。这计算 ListView 中真实的单词数,减去 divider widget 数。
/*4*/ 如果到达了可用单词的结尾,接着生成 10个到建议列表中。调用 _buildRow 展示每行的 title。
Widget _buildRow(WordPair pair) {
return ListTile(
title: Text(
pair.asPascalCase,
style: _biggerFont,
),
);
}
} // 有状态的类除了创建 State 类的实例,什么都不做。
class RandomWords extends StatefulWidget {
@override
RandomWordsState createState() => new RandomWordsState();
}
Flutter Api Doc(https://docs.flutter.io/flutter/index.html):
ListTile 一个单独的固定高度的行,一般包含有文本和前后图标(https://docs.flutter.io/flutter/material/ListTile-class.html)。
第一行的 text 不是可选的,由 title 指定。
subtitle 是可选的,会分配附加一行文本的空间,或者当 isThreeLine 为 true 是两行。
dense 为 true 时,title 总高 和 DefaultTextStyles 包裹的 title、subtitle 尺寸会缩小。
ListTile 总是固定的高度(取决于 isThreeLine、dense、subtitle 是如何配置的);根据它们的内容无法增加高度。
如果你在寻找可以在一行内任意布局的 widget,考虑使用 Row.
ListTile 一般在 ListViews 中使用,或者 Drawer 和 Card 的 Column 中。
需要它的一个祖先是 Material widget。
ListTileTheme,给 ListTiles 定义了视觉属性。
ListView,可以在一个滚动列表中展示任意数量的 ListTile。
CircleAvatar,代表一个人的 icon,通常作为 ListTile 的 leading 元素来使用。
Card,展示少量的带有 Column 的 ListTiles。
Divider,
ListTile.divideTitles,
CheckboxListTile,RadioListTile,SwitchListTile
Divider 两边带有 padding的一个设备像素厚水平线(https://docs.flutter.io/flutter/material/Divider-class.html)。
Divider 可以用在 list、Drawer 和其它需要水平/垂直分隔内容的地方。
在一个列表的 item 中使用一像素 divider,考虑使用 ListTile.divideTiles,是针对这种情况优化的例子。
盒子高度由 Divider.height 控制,合适的 padding 会在宽高中自动计算。
PopupMenuDivider,等同 Divider,但是针对弹出菜单。
ListTile.divideTiles,另一种 list 中的 divide widget 的途径。
part1:https://flutter.io/docs/get-started/codelab
LearnMore:https://flutter.dev/docs/get-started/learn-more
ApiReference:https://docs.flutter.io/
FlutterPackages:https://pub.dartlang.org/flutter
Codelabs:https://codelabs.developers.google.com/codelabs/flutter/index.html#3
Link:https://www.cnblogs.com/farwish/p/10393029.html
[Flutter] 写第一个 Flutter app,part1 要点的更多相关文章
- Python-Django 第一个Django app
第一个Django app by:授客 QQ:1033553122 测试环境: Python版本:python-3.4.0.amd64 下载地址:https://www.python.org/do ...
- 写一个TODO App学习Flutter本地存储工具Moor
写一个TODO App学习Flutter本地存储工具Moor Flutter的数据库存储, 官方文档: https://flutter.dev/docs/cookbook/persistence/sq ...
- 编写第一个Flutter App(翻译)
博客搬迁至http://blog.wangjiegulu.com RSS订阅:http://blog.wangjiegulu.com/feed.xml 以下代码 Github 地址:https://g ...
- Flutter交互实战-即刻App探索页下拉&拖拽效果
前言 Flutter最近比较热门,但是Flutter成体系的文章并不多,前期避免不了踩坑:我这篇文章主要介绍如何使用Flutter实现一个比较复杂的手势交互,顺便分享一下我在使用Flutter过程中遇 ...
- Flutter入门教程(四)第一个flutter项目解析
一.创建一个Flutter工程 1.1 命令行创建 首先我们找一个空目录用来专门存放flutter项目,然后在路径中直接输入cmd: 使用 flutter create <projectname ...
- 一下午简单写个搭建Flutter开发环境,dome跑起来!
1.下载flutter包由于需要翻墙,国内下载会出现问题,所有需要先配置一下用户环境变量. export PUB_HOSTED_URL=https://pub.flutter-io.cn export ...
- flutter,跟着官网一步一步创建第一个flutter应用
创建第一个flutter 编辑器: vscode 一.创建flutter项目 1.启动vscode 2.按ctrl+shift+p打开命令面板 3.输入flutter 选择Flutter: New P ...
- 用C#写的一个OA类的APP, ios、Android都能跑,有源代码
这是一个用C#写的OA类APP,功能包含请假.报销.部门管理.签到.IM.文件上传等功能 话不多说,先看视频 视频地址:http://v.youku.com/v_show/id_XMzUwMjQ1Mz ...
- 创建你的第一个Flutter应用程序
前言 Flutter,Google推出的跨平台开发框架.就在前几天,Flutter的首个发布预览版(Release Preview 1)正式发布! 即将迎来Flutter 正式版(1.0).本篇将带你 ...
随机推荐
- servlet_3
ServletContext 介绍 提供的功能 servlet中获取servletcontext实例 servletcontext接口的方法 package com.fgy; import java. ...
- 创建一个dynamics 365 CRM online plugin (十) - Isolation mode or trust mode
Isolation Mode 也被称作为Plugin Trust CRM里面有两种plugin trust / isolation mode 1. Full Trust 只在OP系统中可使用,没有限制 ...
- Hbase数据库
1.简介 HBase从诞生至今将近10年,在apache基金会的孵化下,已经变成一个非常成熟的项目,也有许多不同的公司支持着许多不同的分支版本,如cloudra等等. HBase不同于一般的关 ...
- 深入理解 ORM框架
1.ORM是什么? object Relational mapping 对象关系映射,是一种为了解决面向对象与关系型数据库存在不匹配现象的技术,简单说,orm通过描述对象和数据库之间映射的元数据,将程 ...
- laravel学习资料
http://blog.csdn.net/qq_20873039/article/category/6246852 --laravel核心概念 /Eloquent ORM / laravel bl ...
- php正则表达式提取img alt/title标签并替换
有时我们需要对富文本编辑器中的img标签进行必要的处理以满足网站自身的需要,比如:根据站点关键词对页面内img的alt标签设定关键词,以下为提取并替换alt/title标签内容的正则: $title ...
- python用字符串调用当前模块内的函数
eval(字符串)() vars()[字符串]() 例如:
- C#使用NPOI读写Excel的注意事项
NPOI的基本使用参照:https://www.cnblogs.com/lixiaobin/p/NPOI.html 既存文档读取修改方法 *既存Excel文档修改保存注意使用FileMode.Crea ...
- SpringBoot启动源码探究---listeners.starting()
1.首先调用starting()方法,其内部是一个对所有listener的starting()调用的for循环,然后每个listener调用另一个starting方法,其内部调用multicastEv ...
- Java核心-多线程-并发控制器-Semaphore信号量
Semaphore是非常有用的一个多线程并发控制组件(Java还有CountDownLatch.CyclicBarrier.Exchanger多线程组件),它相当于是一个并发控制器,是用于管理信号量的 ...