Flutter入门

最新推荐文章于 2024-07-03 23:56:41 发布

豆豆菌

最新推荐文章于 2024-07-03 23:56:41 发布

阅读量230

点赞数

分类专栏： Flutter 文章标签： flutter

本文链接：https://blog.csdn.net/weixin_43900952/article/details/107319840

版权

Flutter 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。

目录结构

目录结构如下图：
在这里插入图片描述
目前着重需要注意一下几个文件夹

文件夹	作用
android	android平台相关代码
ios	ios平台相关代码
lib	flutter相关代码，我们主要编写的代码就在这个文件夹
test	用于存放测试代码
pubspec.yaml	配置文件，一般存放一些第三方的依赖。

lib中只有一个main.dart文件。这个文件是入口文件，

其中的main() 是入口方法

常用组件

Stateful（有状态）和 stateless（无状态）widgets

有些widgets是有状态的, 有些是无状态的
如果用户与widget交互，widget会发生变化，那么它就是有状态的.
widget的状态（state）是一些可以更改的值, 如一个slider滑动条的当前值或checkbox是否被选中.
widget的状态保存在一个State对象中, 它和widget的布局显示分离。
当widget状态改变时, State 对象调用setState(), 告诉框架去重绘widget.

StatelessWidget 没有内部状态. Icon、 IconButton, 和Text 都是无状态widget, 他们都是 StatelessWidget 的子类。

StatefulWidget 是动态的. 用户可以和其交互 (例如输入一个表单、或者移动一个slider滑块),或者可以随时间改变 (也许是数据改变导致的UI更新).Checkbox, Radio, Slider,InkWell, Form, and TextField 都是 statefulWidgets, 他们都是 StatefulWidget的子类。

MaterialApp

表示一个应用了 Material 界面风格的应用程序，它封装了应用程序实现 Material Design 所需要的一些widget，大多数项目的界面都应该基于 MaterialApp 进行呈现。

例：

MaterialApp(
  // 指定应用程序在任务栏上显示的标题
  title: 'Flutter初体验',
  // 指定应用程序的主界面
  home: Text('aaa'),
  // 配置应用程序的主题
  theme: ThemeData(primarySwatch: Colors.red),
)

Scaffold

该组件是页面结构的脚手架，包含了页面的基本组成单元，例如：

appBar【头部导航条区域】
body【页面主题内容区域】
drawer【侧边栏抽屉区域】
bottomNavigationBar【底部tabBar区域】
floatingActionButton【右下角浮动按钮区域】

例：


Scaffold(
    appBar: AppBar(
      title: Text('页面标题'),
    ),
    body: Center(
      child: Text('主体内容'),
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: () {},
      child: Icon(Icons.add),
    ),
    drawer: Drawer(),
  ),
  // 主题颜色
  theme: ThemeData(primarySwatch: Colors.red),
)

Text

值	说明
TextAlign	文本对齐方式
maxLines	文字最多显示行数
overflow	设置文本溢出时，如何处理
softWrap	文本过长，是否需要换行。默认为true
TextStyle	文本样式

TextAlign属性

文本对齐方式，取值如下：

值	说明
center	文本以居中形式对齐,这个也算比较常用的了
left	让文本居左进行对齐，效果和start一样
right	右对齐
start	以开始位置进行对齐，类似于左对齐
end	以为本结尾处进行对齐，不常用。有点类似右对齐

maxLines属性

设置文字最多显示行数

overflow属性

该属性用来设置文本溢出时，如何处理。通常如下几个常用值有：

值	说明
clip	直接切断，剩下的文字就没有了，感觉不太友好，体验性不好
ellipsis	在后边显示省略号，体验性较好，这个在工作中经常使用
fade	溢出的部分会进行一个渐变消失的效果，当然是上线的渐变，不是左右的哦

TextStyle属性

该属性用来设置文本样式，样式属性如下：

值	说明
color	颜色
fontSize	字号
fontWeight	字重，加粗也用这个字段 FontWeight.w700
fontStyle	FontStyle.normal FontStyle.italic斜体
letterSpacing	字符间距就是单个字母或者汉字之间的间隔，可以是负数
wordSpacing	字间距句字之间的间距
height	当用来Text控件上时，行高（会乘以fontSize,所以不以设置过大）
decoration	添加上划线，下划线，删除线
decorationColor	划线的颜色
fontFamily	字体

Container

Container相当于H5内的div，是一个组合类容器。
官方给出的简介，是一个结合了绘制（painting）、定位（positioning）以及尺寸（sizing）widget的widget。

可以得出几个信息，它是一个组合的widget，内部有绘制widget、定位widget、尺寸widget。

Container自身尺寸的调节分两种情况：

Container在没有子节点（children）的时候，会试图去变得足够大。除非constraints是unbounded限制，在这种情况下，Container会试图去变得足够小。
带子节点的Container，会根据子节点尺寸调节自身尺寸，但是Container构造器中如果包含了width、height以及constraints，则会按照构造器中的参数来进行尺寸的调节。
|值|说明|
|—|---|
|alignment|控制child的对齐方式，如果container或者container父节点尺寸大于child的尺寸，这个属性设置会起作用，有很多种对齐方式。|
|padding|decoration内部的空白区域，如果有child的话，child位于padding内部。padding与margin的不同之处在于，padding是包含在content内，而margin则是外部边界，设置点击事件的话，padding区域会响应，而margin区域不会响应。|
|color|用来设置container背景色，如果foregroundDecoration设置的话，可能会遮盖color效果。|
|decoration|绘制在child后面的装饰，设置了decoration的话，就不能设置color属性，否则会报错，此时应该在decoration中进行颜色的设置|
|foregroundDecoration|绘制在child前面的装饰。|
|width|container的宽度，设置为double.infinity可以强制在宽度上撑满，不设置，则根据child和父节点两者一起布局。|
|height|container的高度，设置为double.infinity可以强制在高度上撑满。|
|margin|围绕在decoration和child之外的空白区域，不属于内容区域。|
|child|container中的内容widget。|

Row/Column

Row和Column都是非常常用的布局控件。一般情况下，比方说需要将控件在一行或者一列显示的时候，都可以使用。但并不是说只能使用Row或者Column去布局，也可以使用Stack，看具体的场景选择。
在这里插入图片描述

属性：

值	说明
MainAxisAlignment	主轴方向上的对齐方式，会对child的位置起作用，默认是start。
MainAxisSize	在主轴方向占有空间的值，默认是max。
CrossAxisAlignment	children在交叉轴方向的对齐方式，与MainAxisAlignment略有不同。
VerticalDirection	定义了children摆放顺序，默认是down。down：从top到bottom进行布局 up：从bottom到top进行布局。
值	说明

ListView

new ListView

ListView是最常用的滑动组件。它在滚动方向上一个接一个地显示它的子组件。在交叉轴中，需要子组件填充ListView。
强调，可滚动组件通过一个List来作为其children属性时，只适用于子组件较少的情况，这是一个通用规律，并非ListView自己的特性，像GridView也是如此。

值	说明
scrollDirection	设置滑动方向 Axis.horizontal 水平默认 Axis.vertical 垂直
padding	内间距
reverse	是否倒序显示默认正序 false 倒序true
primary	false，如果内容不足，则用户无法滚动而如果[primary]为true，它们总是可以尝试滚动。
itemExtent	确定每一个item的高度会让item加载更加高效
item	item 数量
controller	滑动监听

LisrView.build

ListView 默认构造函数虽然简单，但不适用于长列表。
ListView.build相比ListView 多了两个属性：

值	说明
itemCount	列表中元素的数量
itemBuilder	子元素的渲染方法，允许自定义子元素

不同于ListViewm默认构造函数children参数指定子元素的这种方式。ListView.build通过暴露统一的itemBuilder方法将子元素的控制交给调用方

ListWiew.separated

大多数需求我们通过ListView.build来解决问题，但是部分列表子项之间需要分割线。此时我们可以用ListView.separated来创建列表。
相比于ListView.build，ListWiew.separated仅仅是多了一个separatorBuilder必填参数。这就是给调用方自定义分割线的回调方法。

Expanded

主要用来控制 flex 布局的占位宽度。

需要用在 Row 或 Column 子组件内部。

例：

Column(
  children: <Widget>[
    Expanded(child: Text('内容1'), flex: 2,),
    Expanded(child: Text('内容2'), flex: 1,)
  ]
)

AppBar

页面的导航条区域，例：

appBar: AppBar(
  // 标题
  title: Text('页面标题ABC'),
  // 标题是否居中显示
  centerTitle: true,
  // 右侧的按钮
  actions: <Widget>[
    Padding( // 为 IconButton 添加右 padding 为 10px
      padding: EdgeInsets.only(right: 10),
      child: IconButton( // 右侧的搜索按钮
        icon: Icon(Icons.search),
        onPressed: () {},
      ),
    )
  ],
)

Drawer

侧边栏抽屉区域，用法比较简单，示例：

drawer: Drawer(
  // 抽屉可能在高度上超出屏幕，所以使用 ListView 组件包裹起来，实现纵向滚动效果
  child: ListView(
    // 干掉顶部灰色区域
    padding: EdgeInsets.all(0),
    // 所有抽屉中的子组件都定义到这里：
    children: <Widget>[],
  )
)

Icon

Icon是 Flutter 的图标类，它集成了 Material 风格的图标。它有几个衍生的组件：ImageIcon、IconButton 等。
Flutter 自带有部分图标供使用者选择（Icons）

值	说明
size	逻辑像素中图标的大小(pt.dp)。由于图标是正方形，设置size等于同时设置了宽高。默认为当前IconTheme大小（如果有）。如果没有 IconTheme，或者它没有指定显式大小，则默认为24.0（带逻辑像素单位）。
color	设置图标颜色，如果没设置以主题是黑色则图标颜色默认为白色，如果主题较浅则图标颜色默认为黑色。

例：

new Icon(Icons.menu);

数据请求

虽然Flutter官网提供了自己的网络请求，但是官方还有一句话，是说HttpClient本身功能较弱，很多常用功能都不支持，所以官方建议我们使用dio来发起网络请求，这是一个强大易用的dart http 请求库，支持Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传/下载、全局配置、超时等

引入第三方框架

这里我们要先将dio库添加到我们的项目中，我们要打开pubspec.yaml文件,在dependencies:下添加代码
```
dio: ^2.1.0
```
在你需要用到dio的地方导入包
```
import 'package:dio/dio.dart';
```

get请求例：

Dio dio = new Dio();
var response = await dio.get("/test",data:{"id":12,"name":"wendu"})
print(response.data);

post请求例：

Dio dio = new Dio();
var response = await dio.post("/test",data:{"id":12,"name":"wendu"})
print(response.data);

注意

注意：await 关键字，必须用在被 async 修饰的方法内！例如：

void getMovieList() async {
    await dio.post("/test",data:{"id":12,"name":"wendu"})
}

页面跳转

跳转到另外一个页面

源码：

static Future<T> push<T extends Object>(BuildContext context, Route<T> route)

第一个参数就是上下问信息，类似Android中的Context，第二个参数就是路由信息，也就是要打开的主要页面是哪个，MaterialPageRoute 就是Route其中的一个子类，用于在Material Desgin 模式下打开页面的

例：

Navigator.push(context, MaterialPageRoute(builder: (context) {
              return NewPage();
            }));

返回上一页面

Navigator.pop(context);

ct>(BuildContext context, Route route)


第一个参数就是上下问信息，类似Android中的Context，第二个参数就是路由信息，也就是要打开的主要页面是哪个，**MaterialPageRoute** 就是Route其中的一个子类，用于在Material Desgin 模式下打开页面的

例：

```dart
Navigator.push(context, MaterialPageRoute(builder: (context) {
              return NewPage();
            }));