Flutter学习笔记—简介与安装配置

一、Flutter简介

Flutter是谷歌的移动UI框架,可以快速在IOSAndroid上构建高质量的原生用户界面。Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。它也是构建未来的Google Fuchsia应用的主要方式。

Flutter


二、Flutter安装与配置

视频文章教程[https://jspang.com/detailed?id=41#toc210]

1、下载Fluttter SDK配置环境变量

2、检查Flutter环境

Flutter doctor

2、创建Flutter应用

Flutter create 项目名
使用安装了Flutter和Dart插件的IDE

4、运行Flutter项目

Flutter run
在带有Flutter和Dart插件的IDE中使用“run”选项
指定运行到某个项目:flutter run -d 'iPhone X'

三、什么是声明式UI?

1、声明式UI概述:

Flutter采用了声明式UI布局方式,为了帮助大家快速上手,本届我们来学习什么是声明式UI,以及它和我们常用的命令式UI的异同。


四、Flutter入门基础知识

1、如何导入Widget(用户界面的基本构建块)?

在React Native中,需要导入每个必须的组件:

// React Native
import React from "react";
import { StyleSheet, Text, View } from "react-native"; // 导入系统组件
import NavigationBar from '../common/NavigationBar'; // 导入自己的组件

在Flutter中,要使用Material Design库中的小组件,则需要导入material.dart包。要使用IOS样式widget,请导入Cupertino库。要使用更基本的窗口widget集,请导入widget库。

import 'package:flutter/material.dart'; // 导入系统material widget 库
import 'package:flutter/cupertino.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter/my_widgets.dart'; // 导入自己的widget

2、创建Hello world

// Flutter
import 'package:flutter/material.dart';

void main() {
    runApp(
      Center(
          child: Text(
              'Hello, world!',
                // 文字排列方式
                textDirection: TextDirection.ltr,
            )
        )
    )
}

3、如何使用Widget并将其嵌套以形成Widget树?

1)Widget概述:

在Flutter中,几乎所有东西都是widget

widget是用户界面的基本构建块,您将widget组成一个层次结构,调用widget树。每个窗口widget都嵌套在父窗口widget中,并从其父窗口继承属性。甚至应用程序对象本身也是一个组件,没有单独“应用程序对象”。相反,根widget担任此角色。

2)Widget可以定义为:

结构元素 ==> 如按钮或菜单
文体与思路 ==> 像字体或颜色主题
类似布局的填充或对齐的一个方向


五、项目结构、资源、依赖和本地化

1、项目结构:

一个Flutter项目通常文件结构是这样子的:

- projectname
    - android       ==>  // Android部分的工程文件
    - build         ==>  // 项目的构建输出目录
    - ios           ==>  // ios部分的工程文件
    - lib           ==>  // 项目中的Dart源文件
      - src             ==>  // 包含其他源文件
      - main.dart       ==>  // 自动生成的项目入口文件,类似RN的index.js文件
    - test          ==>  // 测试相关文件
    - pubspec.yaml  ==>  // 项目依赖配置文件类似于RN的package.json

2、如何添加Flutter项目所需的依赖?

在Android中,你可以在Gradle文件来添加依赖项;
在IOS中,通常把依赖添加到 Podfile中;
在RN中,通常是由package.json来管理项目依赖;


六、认识视图(Views)

1、谁是Flutter中View?

在Android中,View是屏幕上显示的所有内容的基础,按钮、工具栏、输入框等一切都是View。
在IOS中,构建UI的过程中将大量使用view对象。这些对象都是UIView的实例。它们可以用作容器来承载其他的UIView,最终构成你的界面布局。
在React Native中,View是一个支持Flexbox布局的容器,样式,触摸处理和辅助控制。


七、布局与列表

1、如何布局?

在Android中,我们通过XML编写布局;
在IOS中,我们会用Storyboard文件来组织views,并对他们设置约束,或在view controller中使用代码来设置约束;
在Flutter中,我们编写一个widget树来声明布局。


转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 848130454@qq.com

文章标题:Flutter学习笔记—简介与安装配置

文章字数:1.2k

本文作者:Spicy boy

发布时间:2020-09-26, 16:28:54

最后更新:2021-03-30, 16:46:21

原始链接:http://www.spicyboy.cn/2020/09/26/Flutter%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E2%80%94%E7%AE%80%E4%BB%8B%E4%B8%8E%E5%AE%89%E8%A3%85%E9%85%8D%E7%BD%AE/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

目录
×

喜欢就点赞,疼爱就打赏