Flutter
Posden
唯天下之至拙能胜天下之至巧。曾国藩表示,我没说过这句话
展开
-
Flutter (一) 环境搭建
之前做过一段时间的RN,也就部署环境,简单的页面书写,调用接口,调试,只是入了个门,毕竟当时技术有限。本想抽空再深入,奈何Flutter最近在移动圈子太火爆,在加上可以跨平台。所以入个坑,希望21天时间,可以从入门到放弃。或者做一个简单app。一边看中文网,一边实操。搭建Flutter开发环境由于Flutter会同时构建Android和IOS两个平台的发布包,所以Flutter同时依赖Andr...原创 2019-05-15 19:26:12 · 277 阅读 · 0 评论 -
Flutter (十五) 路由及导航
一、 页面跳转基本使用移动端通常称为"屏幕"或”页面“的全屏元素显示其内容,在flutter中,称为路由,import 'package:flutter/material.dart';void main() { runApp(new MaterialApp(title:'导航页面示例', home: new Demo()));}class Demo extends Statele...原创 2019-06-29 17:04:53 · 430 阅读 · 0 评论 -
Flutter (十四) 状态组件 传值
import 'package:flutter/material.dart';void main() { runApp(new MaterialApp(title: 'State', home: new Demo()));}class Demo extends StatelessWidget { int count = 0; @override Widget ...原创 2019-06-22 16:03:52 · 3435 阅读 · 0 评论 -
Flutter (十) Material Design风格组件(二)
PopupMenuButton(弹出菜单组件)import 'package:flutter/material.dart';void main() => runApp(new MyApp());// 会控菜单项enum ConferernceItem { AddMember, LockConference, ModifyLayout, TurnofAll }class My...原创 2019-06-12 00:21:09 · 309 阅读 · 0 评论 -
Flutter (十三) 页面布局 综合案例 ( 二 )
思路封装公用Widget,ListView的另一个用途:避免内容过长代码:import 'package:flutter/material.dart';void main() { runApp(new MaterialApp(title: '综合 布局', home: new LayoutDemo()));}class LayoutDemo extends Stateles...原创 2019-06-20 00:06:50 · 349 阅读 · 0 评论 -
Flutter (九) Material Design风格组件(一)
Material Design App结构和导航组件一、MaterialApp(应用组件)title:标题theme:主题color:应用的主题颜色home:定义当前页面打开时所显示的界面routes:页面跳转规则,路由initialRoute:初始化路由onGenerateRoute:路由回调1.设置主页import 'package:flutter/material....原创 2019-06-10 00:12:01 · 1525 阅读 · 0 评论 -
Flutter (十二) 页面布局 综合案例 ( 一 )
用比较常见的布局案例,先入门,具体的组件属性就在后期的学习中加强。先把模子搭起来,再细琢。案例一导入图片注意:配置图片路径写法注意,不要多空格,文件路径以及文件名要正确。布局思路如下图代码用到的Widget :Container Column Row Expandedimport 'package:flutter/material.dart';void main() {...原创 2019-06-18 22:55:20 · 1103 阅读 · 1 评论 -
Flutter (六) Widget布局
Widget布局布局类Widget都会包含一个或多个子widget,不同的布局类Widget对子widget排版(layout)方式不同。widget其实就是Element的配置数据。Flutter中,根据Widget是否需要包含子节点将Widget分为了三类,分别对应三种Element,如下表:布局类Widget就是指直接或间接继承(包含)MultiChildRenderObjectWid...原创 2019-06-02 13:56:37 · 431 阅读 · 0 评论 -
Flutter (八) Widget 列表
ListViewListView是最常用的可滚动widget,它可以沿一个方向线性排布所有子widget。scrollDirection:列表排列方向,默认是垂直方法,Axis.vertical。水平是Axis.horizontal;itemExtent:该参数如果不为null,则会强制children的"长度"为itemExtent的值;这里的"长度"是指滚动方向上子widget的长度,...原创 2019-06-07 19:07:56 · 851 阅读 · 0 评论 -
Flutter (七) Widget容器
ContainerContainer本身不对应具体的RenderObject,它是DecoratedBox、ConstrainedBox、Transform、Padding、Align等widget的一个组合widget。import 'package:flutter/material.dart';void main() => runApp(new MyApp());class ...原创 2019-06-07 12:40:25 · 237 阅读 · 0 评论 -
Flutter (十一) Material Design风格组件(三)
SimpleDialog(简单对话框组件)import 'package:flutter/material.dart';void main() => runApp(new MyApp());class MyApp extends StatelessWidget{ @override Widget build(BuildContext context){ retur...原创 2019-06-12 23:15:07 · 393 阅读 · 0 评论 -
Flutter (四) Widget基础 ( 二)
按钮Material widget库中提供了多种按钮Widget如RaisedButton、FlatButton、OutlineButton等,它们都是直接或间接对RawMaterialButton的包装定制,所以他们大多数属性都和RawMaterialButton一样。所有Material 库中的按钮都有如下相同点:按下时都会有“水波动画”。有一个onPressed属性来设置点击回调,...原创 2019-05-23 22:54:12 · 221 阅读 · 0 评论 -
Flutter (五) Widget基础 ( 三 )
单选,复选框Material widgets库中提供了Material风格的单选开关Switch和复选框Checkbox,它们都是继承自StatelessWidget,所以它们本身不会保存当前选择状态,所以一般都是在父widget中管理选中状态。当用户点击Switch或Checkbox时,它们会触发onChanged回调,我们可以在此回调中处理选中状态改变逻辑。也是从网上找来的例子1、Swit...原创 2019-05-26 17:25:04 · 195 阅读 · 0 评论 -
Flutter (二) Dart入门 一篇就够了
Dart 中文官网学习Flutterr入个门,应该不难,问题的关键是有个新语言Dart。要不是Flutter启用了,怕是没多少开发人员用吧,尤其前端仔,想js一站到底吧。VsCode配置Dart插件,昨天配置flutter自带了code runningDart 概念在变量中可以放置的所有东西都是对象,而每个对象都是类的实例。无论数字、函数和null都是对象。所有对象都继承自[Ob...原创 2019-05-16 23:51:41 · 4318 阅读 · 0 评论 -
Flutter (三) Widget基础 ( 一 )
WidgetFlutter中几乎所有的对象都是一个Widget,与原生开发中“控件”不同的是,Flutter中的widget的概念更广泛,它不仅可以表示UI元素,也可以表示一些功能性的组件如:用于手势检测的 GestureDetector widget、用于应用主题数据传递的Theme等等。而原生开发中的控件通常只是指UI元素。lib/main.dart 文件入口启动项目flutter ...原创 2019-05-21 23:12:50 · 2209 阅读 · 0 评论 -
Flutter (十六) 打包
在开发中,运行flutter run 运行的版本,构建的是debug版本1.检查App Manifest2.查看构建配置 applicationId "com.example.flutter_app1" //唯一的appid minSdkVersion 16 //最低api级别 targetSdkVersion 28 //指定应用程序设计运行...原创 2019-06-29 18:37:48 · 263 阅读 · 0 评论