Flutter学习笔记

news/2024/11/28 13:46:41/

此篇文章用来记录学习Flutter 和 Dart 相关知识


零.Dart基本数据类型

Dart 是一种静态类型的编程语言,它提供了一系列基本数据类型,用于存储和操作不同种类的数据。以下是 Dart 中的一些基本数据类型以及它们的详细介绍:

1. 整数类型(Integer):

Dart 提供了两种整数类型:int 和 num。
int 表示整数,可以存储正数、负数和零。
num 是 int 和 double 的超类型,可以用来表示整数和浮点数。

int age = 30;
num temperature = 98.6;

2. 浮点数类型(Double):

Dart 中的浮点数类型为 double,用于表示带有小数点的数值。

double pi = 3.14159;

3.字符串类型(String):

字符串类型用于表示文本数据。
字符串可以由单引号或双引号包围。

String greeting = 'Hello, Dart!';

4.布尔类型(Boolean):

布尔类型只有两个值:true 和 false,用于表示逻辑真值和假值。

bool isDartFun = true;

5.列表类型(List):

列表是有序的数据集合,可以包含不同类型的元素。
列表使用方括号 [] 定义,并可以通过索引访问元素。

List<int> numbers = [1, 2, 3, 4, 5];

6.映射类型(Map):

映射是一组键值对的集合,其中每个键都与一个值相关联。
映射使用大括号 {} 定义。

Map<String, int> grades = {'Alice': 90, 'Bob': 85, 'Carol': 92};

7.符号类型(Symbol):
符号类型用于表示运行时的标识符或运算符。
符号使用 # 符号前缀定义。

Symbol mySymbol = #myIdentifier;

8.空类型(Null):

Dart 有一个特殊的数据类型 Null,表示一个空值或缺失值。
在非空安全(null-safe)的 Dart 中,所有的变量默认都不可以为 null,需要使用 ? 明确标记为可为 null。

String? nullableString = null; // 可为 null 的字符串

9.动态类型(Dynamic):

dynamic 是 Dart 中的一个特殊类型,可以存储任意类型的数据。
使用 dynamic 声明的变量可以在运行时改变其类型。

dynamic dynamicVariable = 42;
dynamicVariable = 'Hello';

这些是 Dart 中的一些基本数据类型。Dart 还支持更多高级数据类型,例如函数、类、枚举等,以便更灵活地处理各种数据和逻辑。此外,Dart 2.12 引入了非空安全(null safety)功能。
注意
Dart 中没有专门的字节数据类型,而是使用 int 来表示字节值,因为 Dart 的整数类型 int 可以存储 8 位的无符号整数,正好对应一个字节。如果你需要表示多个字节的数据,可以使用列表 (List) 或字节数组 (Uint8List,通常需要导入 dart:typed_data 库)。

一.Dart 一些语法

const:关键字,用于声明一个编译时常量

变量声明
const int x = 5;构造函数: 用于声明一个可以在编译时确定值的常量构造函数。
class MyClass {final int value;const MyClass(this.value);
}数组和映射字面量: 可以用 const 声明编译时常量的数组和映射。
const List<int> numbers = [1, 2, 3];
const Map<String, int> scores = {'John': 100, 'Jane': 90};

继承关系
dart有三种方式,分别是extends(继承),with(混入) ,implements(实现),三种可以混合使用,其中with,implements后可以多继承,用逗号隔开,extends后面只能跟一个,优先级顺序为with>extends>implements,当with,implements后跟了多个的时候,优先级最右边大于左边,依次类推,例如extends a with b,c implements d,h,优先级为c>b>a>h>d;

函数可选参数
与java不同,dart中不支持重载,java支持方法重载,dart想要实现java类似的效果,可以通过可选参数来实现

selectFunction("张三");
selectFunction("李四",type: 1);
selectFunction("王五",type: 1,money: 83.2);void selectFunction(String name,{int? type,double? money}){print("名字:$name--类型:$type--金额:$money");
}
//注意dart可选参数必须要加?来表示该参数默认值为null,如果去掉?可以手动写个默认值,例如
void selectFunction(String name,{int type = 0,double? money}){print("名字:$name--类型:$type--金额:$money");
}
//输出结果:名字:张三--类型:null--金额:null
//名字:李四--类型:1--金额:null
//名字:王五--类型:1--金额:83.2

二.Flutter 中的一些基础小部件

Center(居中对齐小部件):

Center小部件用于在可用空间内使其子小部件水平和垂直居中对齐。它接受一个需要居中的子小部件。Center小部件将扩展以填充父小部件的所有可用空间,并在该空间内居中其子小部件。

Center(child: Text('Hello, Flutter!',style: TextStyle(fontSize: 24.0),),
)

Text(文本小部件):

Text小部件用于在屏幕上显示一行文本。可以自定义文本的样式,例如字体大小、颜色和对齐方式。通过将字符串传递给Text小部件的data参数,可以设置文本的内容。

常用的Text属性:

  • data(String):要显示的文本内容。
  • style(TextStyle):定义文本的样式,如字体、大小、颜色等。
  • textAlign(TextAlign):指定文本在水平方向上的对齐方式。
    –TextAlign.left:文本左对齐。
    –TextAlign.right:文本右对齐。
    –TextAlign.center:文本居中对齐。
    –TextAlign.justify:文本两端对齐,会调整单词和字之间的间隔。
  • textDirection(TextDirection):指定文本的方向,如从左到右或从右到左。
  • textScaleFactor(double):指定文本的缩放比例。
  • maxLines(int):指定允许的最大行数,超过将使用"…"截断。
  • overflow(TextOverflow):定义文本溢出时的处理方式。
  • softWrap(bool):指定文本是否自动换行。
 body: Center(child: Text('Hello, Flutter!',style: TextStyle(fontSize: 24,fontWeight: FontWeight.bold,color: Colors.blue,),),),

Button(按钮)

RaisedButton

RaisedButton 是一个具有凸起效果的按钮,通常用于主要操作。

它具有各种自定义属性,如 onPressed、child、color、disabledColor、textColor 等,以定制外观和行为。

RaisedButton(onPressed: () {// 按钮被点击时执行的操作},child: Text('Submit'),
)
FlatButton

FlatButton 是一个扁平化的按钮,通常用于次要操作。

它有类似于 RaisedButton 的自定义属性,可以根据需求进行定制。

FlatButton(onPressed: () {// 按钮被点击时执行的操作},child: Text('Cancel'),
)
OutlineButton

OutlineButton 是一个带有边框的按钮,通常用于取消操作或与背景区分。

它也有类似于 RaisedButton 的自定义属性,以便自定义外观和行为。

OutlineButton(onPressed: () {// 按钮被点击时执行的操作},child: Text('Clear'),
)
FloatingActionButton

FloatingActionButton 是一个圆形的浮动操作按钮,常用于应用程序的主要操作。

它也具有各种自定义属性和样式,可以根据需求进行调整。

FloatingActionButton(onPressed: () {// 按钮被点击时执行的操作},child: Icon(Icons.add),
)
IconButton

IconButton 是一个只包含图标的按钮,通常用于具有图标表示的操作。

它也有各种自定义属性和样式,以便自定义外观和行为。

IconButton(onPressed: () {// 按钮被点击时执行的操作},icon: Icon(Icons.favorite),
)

Container(容器小部件):

Container小部件是一个多用途灵活的小部件,可以包含其他小部件。允许自定义属性,如宽度、高度、填充、边距、颜色等,以控制其子小部件的布局和外观。它还可以对子小部件应用变换、装饰和约束。

Container(width: 200.0,height: 100.0,color: Colors.blue,child: Center(child: Text('Hello, Flutter!',style: TextStyle(fontSize: 24.0, color: Colors.white),),),
)

RowColumn(行和列小部件):

这些布局小部件用于将其子小部件按水平(Row)或垂直(Column)线排列。它们可以包含多个子小部件,并根据子小部件的属性和可用空间自动调整大小和位置。可以使用特定参数控制子小部件的对齐方式、间距和调整大小的行为。

Row小部件具有以下一些常用的属性:

  • children(List<Widget>):需要包含在Row中的子部件列表。
  • mainAxisAlignment(MainAxisAlignment):子部件在主轴方向上的对齐方式,默认是start。
  • crossAxisAlignment(CrossAxisAlignment):子部件在交叉轴方向上的对齐方式,默认是start。
  • mainAxisSize(MainAxisSize):Row在主轴方向上的大小约束,默认是MainAxisSize.max。
  • textDirection(TextDirection):子部件的文本方向,默认是TextDirection.ltr。
  • verticalDirection(VerticalDirection):子部件在垂直方向上布局的方向,默认是VerticalDirection.down。
 body: Row(mainAxisAlignment: MainAxisAlignment.center, // 在水平方向上居中对齐crossAxisAlignment: CrossAxisAlignment.start, // 在垂直方向上上对齐mainAxisSize: MainAxisSize.min, // 占用尽可能少的水平空间textDirection: TextDirection.ltr, // 子部件的文本方向从左到右verticalDirection: VerticalDirection.down, // 从上到下布局children: [Text('First Item',style: TextStyle(fontSize: 24),),SizedBox(width: 20), // 在子部件之间增加间距Text('Second Item',style: TextStyle(fontSize: 24),),Container(color: Colors.blue,width: 200,height: 200,child: Text('Third Item',style: TextStyle(fontSize: 24, color: Colors.white),),),],),

Column小部件具有以下一些常用的属性:

  • children(List<Widget>):需要包含在Column中的子部件列表。
  • mainAxisAlignment(MainAxisAlignment):子部件在主轴方向上的对齐方式,默认是start。
  • crossAxisAlignment(CrossAxisAlignment):子部件在交叉轴方向上的对齐方式,默认是start。
  • mainAxisSize(MainAxisSize):Column在主轴方向上的大小约束,默认是MainAxisSize.max。
  • verticalDirection(VerticalDirection):子部件在垂直方向上布局的方向,默认是VerticalDirection.down。
body: Column(mainAxisAlignment: MainAxisAlignment.center, // 在垂直方向上居中对齐crossAxisAlignment: CrossAxisAlignment.start, // 在水平方向上左对齐mainAxisSize: MainAxisSize.min, // 占用尽可能少的垂直空间verticalDirection: VerticalDirection.down, // 从上到下布局children: [Text('First Item',style: TextStyle(fontSize: 24),),SizedBox(height: 20), // 在子部件之间增加间距Text('Second Item',style: TextStyle(fontSize: 24),),Container(color: Colors.blue,width: 200,height: 200,child: Text('Third Item',style: TextStyle(fontSize: 24, color: Colors.white),),),],),

Image(图像小部件):

Image小部件用于在屏幕上显示图像。它支持各种图像来源,例如本地资源、网络图像和内存图像。可以自定义其属性,如大小、缩放和对齐方式,以及处理加载和错误状态。

Image(image: AssetImage('assets/images/flutter_logo.png'),width: 100.0,height: 100.0,
)

StatelessWidgetStatefulWidget

StatelessWidget:
StatelessWidget是一种无状态的小部件,意味着它在创建后是不可变的,不会随时间改变。它基于构建函数的输入参数,一旦构建完成,就渲染出静态的用户界面。简单来说,StatelessWidget没有内部状态(state)。

import 'package:flutter/material.dart';class MyWidget extends StatelessWidget {final String text;MyWidget({required this.text});Widget build(BuildContext context) {return Container(child: Text(text),);}
}

StatefulWidget:
StatefulWidget是一种有状态的小部件,它的内部状态可以随时间变化,所以它可以在创建后重新构建。StatefulWidget由两个部分组成:一个是State对象,用于保存和管理小部件的状态,另一个是StatefulWidget类本身,用于构建小部件的UI。

import 'package:flutter/material.dart';class CounterWidget extends StatefulWidget {_CounterWidgetState createState() => _CounterWidgetState();
}class _CounterWidgetState extends State<CounterWidget> {int _counter = 0;void _incrementCounter() {setState(() {_counter++;});}Widget build(BuildContext context) {return Column(children: [Text('Counter: $_counter'),ElevatedButton(onPressed: _incrementCounter,child: Text('Increment'),),],);}
}

GestureDetector

用于处理用户手势和触摸事件。它可以用于识别和响应各种手势,如点击、长按、拖动、缩放和滑动等。GestureDetector 可以包裹任何其他小部件,并通过回调函数来响应不同的手势事件。

GestureDetector 的常用属性和介绍:

  • onTap: 当用户轻触手势时触发的回调函数。
  • onDoubleTap: 当用户双击手势时触发的回调函数。
  • onLongPress: 当用户长按手势时触发的回调函数。
  • onLongPressMoveUpdate: 当用户在长按手势的情况下移动时触发的回调函数。
  • onVerticalDragDown: 当用户在垂直方向开始拖动手势时触发的回调函数。
  • onVerticalDragEnd: 当用户在垂直方向结束拖动手势时触发的回调函数。
  • onScaleStart: 当用户开始缩放手势时触发的回调函数。
  • onScaleUpdate: 当用户进行缩放手势时触发的回调函数。
  • behavior: 用于指定如何识别和处理手势事件的 HitTestBehavior。

使用示例:

import 'package:flutter/material.dart';class MyGestureDetector extends StatelessWidget {Widget build(BuildContext context) {return GestureDetector(// 点击事件onTap: () {print('onTap');},// 双击事件onDoubleTap: () {print('onDoubleTap');},// 长按事件onLongPress: () {print('onLongPress');},// 缩放手势onScaleStart: (details) {print('onScaleStart: ${details.focalPoint}');},onScaleUpdate: (details) {print('onScaleUpdate: ${details.focalPoint}, ${details.scale}');},onScaleEnd: (details) {print('onScaleEnd: ${details.velocity}');},// 拖动手势onPanStart: (details) {print('onPanStart: ${details.globalPosition}');},onPanUpdate: (details) {print('onPanUpdate: ${details.globalPosition}');},onPanEnd: (details) {print('onPanEnd: ${details.velocity}');},// 指针击中测试behavior: HitTestBehavior.opaque,// 点击区域的命中测试hitTestBehavior: HitTestBehavior.translucent,// 排除特定手势excludeFromSemantics: true,// 双击事件的时间窗口doubleTapTimeout: Duration(milliseconds: 300),// 长按事件的时间窗口longPressTimeout: Duration(milliseconds: 500),// 长按事件的触发间隔longPressMoveUpdateDelay: Duration(milliseconds: 200),// 其它属性dragStartBehavior: DragStartBehavior.start,child: Container(width: 200,height: 200,color: Colors.blue,),);}
}

三.对齐 widgets

mainAxisAlignmentcrossAxisAlignment是用于定位和对齐子部件的属性,它们通常用于Flex、Row和Column等布局小部件中。
在这里插入图片描述
mainAxisAlignment的值可以是以下之一:

  • MainAxisAlignment.start:将子部件沿主轴的起始位置对齐。
  • MainAxisAlignment.end:将子部件沿主轴的结束位置对齐。
  • MainAxisAlignment.center:将子部件沿主轴的中心位置对齐。
  • MainAxisAlignment.spaceBetween:将子部件均匀地分布在主轴上,使它们之间的间距相等,第一个子部件放置在起始位置,最后一个子部件放置在结束位置。
  • MainAxisAlignment.spaceAround:将子部件均匀地分布在主轴上,使它们之间和两端的间距相等。
  • MainAxisAlignment.spaceEvenly:将子部件均匀地分布在主轴上,使它们之间的间距和两端的间距相等。

mainAxisAlignment使用示例:

Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,children: [Container(color: Colors.red, width: 50, height: 50),Container(color: Colors.green, width: 50, height: 50),Container(color: Colors.blue, width: 50, height: 50),],
)

crossAxisAlignment的值可以是以下之一:

  • CrossAxisAlignment.start:将子部件沿副轴的起始位置对齐。
  • CrossAxisAlignment.end:将子部件沿副轴的结束位置对齐。
  • CrossAxisAlignment.center:将子部件沿副轴的中心位置对齐。
  • CrossAxisAlignment.stretch:将子部件沿副轴拉伸以填充可用空间。
  • CrossAxisAlignment.baseline:将子部件的基线与副轴上的基准线对齐,需要在子部件上设置基线对齐方式(如TextBaseline)。

crossAxisAlignment使用示例:

Column(crossAxisAlignment: CrossAxisAlignment.center,children: [Container(color: Colors.red, width: 50, height: 50),Container(color: Colors.green, width: 50, height: 50),Container(color: Colors.blue, width: 50, height: 50),],
)

四.调整widgets大小

Expanded widget
用于在父部件的剩余可用空间中扩展一个子部件。它通常与Flex、Column或Row等灵活的布局小部件一起使用,以便在父部件中使用弹性盒子模型进行布局。

当Expanded小部件包装在一个子部件周围时,它会将该子部件填充并扩展到可用空间的剩余部分,以沿着主轴方向占据所有剩余的空间。这使得子部件能够灵活地从父部件中分配和占据可用空间,而不受其自身固定大小的限制。

使用示例

Row(children: [Container(color: Colors.red, width: 50, height: 50),Expanded(child: Container(color: Colors.green),),Container(color: Colors.blue, width: 50, height: 50),],
)

Flex
Flex用于创建灵活的布局,可以根据可用空间的大小动态调整子部件的大小。可以将 Flex 小部件作为Expanded的子部件,并通过指定flex属性来控制子部件在可用空间中的分配比例。
可以简单理解为LinearLayout中的权重

使用示例

Row(children: [Container(color: Colors.red, width: 50, height: 50),Expanded(flex: 2,child: Container(color: Colors.green),),Expanded(flex: 1,child: Container(color: Colors.blue),),],
)

当一个Expanded组件包含在一个垂直方向(或水平方向)的Flex容器(如Column或Row)中时,该Expanded组件会将其子组件填充到相应方向上的所有可用空间。如果有多个垂直方向的Expanded组件,则它们会按照它们的flex属性(默认为1)来分配可用空间。

换句话说,Expanded组件在默认情况下会尽可能地扩展,以填充Flex容器中剩余的可用空间,但具体的高度取决于Flex容器的大小和其他子组件的约束条件

五.通用布局 widgets

标准 widgets

  • Container:向 widget 增加 padding、margins、borders、background color 或者其他的“装饰”。

  • GridView:将 widget 展示为一个可滚动的网格。

  • ListView:将 widget 展示为一个可滚动的列表。

  • Stack:将 widget 覆盖在另一个的上面。

Material widgets

  • Card:将相关信息整理到一个有圆角和阴影的盒子中。

  • ListTile:将最多三行的文本、可选的导语以及后面的图标组织在一行中。


六.输入表单

TextField (文本框)

用于接收用户输入文本的小部件,它提供了一个可编辑的文本框,用户可以在其中输入、编辑和选择文本。

常用的属性及其作用:

  1. controller: 一个 TextEditingController 对象,用于控制文本输入框的值,获取输入的内容或设置初始值。
  2. focusNode: 一个 FocusNode 对象,用于管理输入框的焦点。
  3. decoration: InputDecoration 类型的对象,用于定义输入框的外观,包括标签文本、提示文本、边框样式等。
  4. keyboardType: TextInputType 枚举类型,指定键盘的类型,以匹配输入的预期内容,如文本、数字、URL、电子邮件等。
  5. textInputAction: TextInputAction 枚举类型,定义了与输入框关联的操作按钮的行为,如完成、下一步、搜索等。
  6. onChanged: 输入内容变化时的回调函数,接受最新的输入值作为参数,通常用于实时校验或更新状态。
  7. onSubmitted: 用户提交输入后的回调函数,接受最终的输入值作为参数。
  8. obscureText: bool 值,用于指定是否要隐藏输入内容,常用于密码输入框。
  9. maxLines: int 值,用于指定输入框的最大行数。
  10. maxLength: int 值,用于指定最大输入长度。
  11. enabled: bool 值,用于指定输入框是否可编辑。
  12. autofocus: bool 值,用于指定是否自动获取焦点。
  13. textAlign: TextAlign 枚举类型,指定文本内容的对齐方式,如左对齐、右对齐、居中等。
  14. cursorColor: Color 对象,指定光标的颜色。
  15. cursorWidth: double 值,用于指定光标的宽度。

使用示例:

import 'package:flutter/material.dart';class MyTextField extends StatefulWidget {_MyTextFieldState createState() => _MyTextFieldState();
}class _MyTextFieldState extends State<MyTextField> {TextEditingController _controller = TextEditingController();FocusNode _focusNode = FocusNode();void dispose() {_controller.dispose();_focusNode.dispose();super.dispose();}Widget build(BuildContext context) {return TextField(controller: _controller,focusNode: _focusNode,decoration: InputDecoration(labelText: 'Enter your name',hintText: 'John Doe',prefixIcon: Icon(Icons.person),suffixIcon: IconButton(icon: Icon(Icons.clear),onPressed: () {_controller.clear();},),border: OutlineInputBorder(),),keyboardType: TextInputType.text,textInputAction: TextInputAction.done,onChanged: (value) {print('Input: $value');},onSubmitted: (value) {print('Submitted: $value');_focusNode.unfocus();},);}
}

关于TextEditingController和FocusNode的介绍:

TextEditingController
TextEditingController是一个控制文本输入的类,它提供了一些方法和属性来获取和修改TextField中输入的文本。主要作用包括:

  • 可以获取TextField中的文本内容:使用text属性可以获取TextField中当前的文本内容。
  • 可以设置TextField的初始值或修改文本内容:使用text属性可以设置TextField的初始值,也可以通过textEditingController.text = newText来修改文本内容。
  • 可以监听文本变化:可以通过注册addListener()方法来监听TextField中的文本变化,以便执行特定的操作。

FocusNode
FocusNode是用于处理TextField焦点的类,它允许管理应用程序中的焦点,并监听焦点变化事件。主要作用包括:

  • 管理TextField的焦点:通过将TextField的focusNode属性设置为FocusNode对象,可以管理TextField的焦点。例如,可以使用focusNode.requestFocus()请求焦点,并使用focusNode.unfocus()取消焦点。
  • 监听焦点变化:可以通过注册addListener()方法来监听焦点的变化,以便在焦点状态发生变化时执行特定的操作,比如显示或隐藏键盘。
  • 控制键盘行为:通过设置keyboardType和textInputAction属性,可以控制键盘的类型(例如纯文本、数字等)和键盘完成按钮的样式(例如完成、下一个等)。

TextFormField (表单文本框)

TextFormField 是一个带有表单功能的文本输入字段小部件。它是基于 TextField 的封装,并提供了一些额外的功能,如表单验证和错误处理。

常用属性及其作用:

  1. controller: 一个 TextEditingController 对象,用于控制文本输入框的值,获取输入的内容或设置初始值。

  2. focusNode: 一个 FocusNode 对象,用于管理输入框的焦点。

  3. decoration: InputDecoration 类型的对象,用于定义输入框的外观,包括标签文本、提示文本、边框样式等。

  4. keyboardType: TextInputType 枚举类型,指定键盘的类型,以匹配输入的预期内容,如文本、数字、URL、电子邮件等。

  5. textInputAction: TextInputAction 枚举类型,定义了与输入框关联的操作按钮的行为,如完成、下一步、搜索等。

  6. validator: 一个函数,接受输入的字符串,根据需求返回一个错误提示字符串,用于对输入内容进行验证。

  7. onChanged: 输入内容变化时的回调函数,接受最新的输入值作为参数,通常用于实时校验或更新状态。

  8. onFieldSubmitted: 用户提交输入后的回调函数,接受最终的输入值作为参数。

使用示例:

import 'package:flutter/material.dart';class MyForm extends StatefulWidget {_MyFormState createState() => _MyFormState();
}class _MyFormState extends State<MyForm> {final _formKey = GlobalKey<FormState>();TextEditingController _nameController = TextEditingController();Widget build(BuildContext context) {return Form(key: _formKey,child: TextFormField(controller: _nameController,decoration: InputDecoration(labelText: 'Name',hintText: 'Enter your name',),validator: (value) {if (value.isEmpty) {return 'Please enter your name';}return null;},onFieldSubmitted: (value) {if (_formKey.currentState.validate()) {// 执行提交操作}},),);}
}

七.关键词

part

用于将多个Dart文件组织在一起,以便更好地管理和维护代码。

part 指令是Dart语言的一部分,它允许你将一个Dart文件分成多个部分,并将它们组合在一起以形成一个完整的库。这对于将大型代码库分解为更小的可管理部分非常有用。

part ‘WeiBoCommentList.g.dart’; 表示当前的Dart文件是一个库的一部分,并且需要引入另一个名为 WeiBoCommentList.g.dart 的Dart文件,以共享一些代码或声明。

通常,part 指令在使用代码生成工具时非常有用,例如json_serializable或moor_generator。这些工具可以根据模型类自动生成代码,而将生成的代码放在单独的文件中,然后使用 part 指令将其引入到主要的模型文件中。

例如,假设 WeiBoCommentList.g.dart 包含自动生成的序列化或数据库访问代码,而 WeiBoCommentList.dart 包含模型类的定义。通过使用 part 指令,你可以将自动生成的代码与手动编写的代码分离开来,以便更轻松地维护和管理项目。

Completer

Completer 是一个用于处理异步操作的类,它允许你手动控制异步操作的完成和结果返回。Completer 的主要作用是创建一个 Future 对象,并允许你在某个后续时刻手动完成这个 Future,从而传递一个值或错误。

以下是 Completer 的主要作用:

  1. 手动完成 Future:使用 Completer,你可以创建一个未来的实例,并在需要的时候手动完成它。这对于异步操作,如网络请求、文件读写等,非常有用,因为你可以在操作完成后通过 Completer 将结果传递给等待的代码。

  2. 处理异步操作的结果:当你使用异步操作时,通常需要等待操作完成并获取结果。通过 Completer 创建的 Future,你可以使用 await 关键字或 .then() 方法等方式来等待操作完成,并获取其结果。

示例:

import 'dart:async';Future<void> fetchData() async {Completer<void> completer = Completer<void>();// 模拟一个异步操作,等待2秒钟后完成Future.delayed(Duration(seconds: 2), () {completer.complete(); // 手动完成Future});await completer.future; // 等待Future完成print('Data fetched successfully');
}void main() {fetchData();print('Fetching data...'); // 这一行会在异步操作完成前执行
}

StreamSubscription

StreamSubscription 是使用 Dart 中的流(Stream)的一种方式。流是一系列异步事件的序列,可以用于接收和处理来自异步操作(如网络请求、数据库查询等)的事件。

StreamSubscription 用于订阅流,并可以跟踪和取消订阅。当你订阅一个流时,你可以指定一个回调函数来处理流中发出的事件。回调函数会在每个事件到达时被调用,而不是等待整个流完成。

订阅流

要订阅流,首先需要获取一个流对象。在Flutter中,很多类(如StreamController、StreamTransformer等)都提供了流的实例化和管理。一旦获取到流对象,你可以使用stream.listen()方法订阅流,并提供一个回调函数来处理流中的事件。

Stream<int> countStream() async* {for (int i = 1; i <= 5; i++) {await Future.delayed(Duration(seconds: 1));yield i;}
}void main() {final stream = countStream();final subscription = stream.listen((data) {print('Received: $data');});// 取消订阅subscription.cancel();
}

上面的示例中,创建了一个简单的计数流countStream(),它每隔一秒产生一个整数。我们通过stream.listen()方法订阅了这个流,并提供了一个回调函数来处理每个事件。

取消订阅

当不再需要订阅流时,应该显式地取消订阅,以释放资源和停止事件的处理。可以调用StreamSubscription对象的cancel()方法来取消订阅。

final subscription = stream.listen((data) {print('Received: $data');
});// 取消订阅
subscription.cancel();

在上面的示例中,保存了StreamSubscription对象到subscription变量中,并在不再需要时调用了cancel()方法来取消订阅。

使用StreamSubscription的其他方法和属性

StreamSubscription提供了一些其他有用的方法和属性,用于管理订阅和检查流的状态,例如:

  • pause()resume():暂停和恢复订阅,以便控制事件的处理。
  • onData():设置一个新的事件回调函数,替换原来的回调函数。
  • onError():设置一个错误回调函数,用于处理流中的错误事件。
  • onDone():设置一个完成回调函数,用于处理流结束时的事件。
  • isPaused:一个布尔值,表示当前订阅是否已暂停。

mixin

Mixin是一种强大的代码重用机制,它允许你将一个类的成员添加到另一个类中,而无需继承该类。Mixin提供了一种方式来在类之间共享代码,同时保持类之间的分离性。

1. 基本语法
class MyClass with MyMixin {// 类的成员和方法
}mixin MyMixin {// Mixin中的成员和方法
}

在上面的代码中,MyClass类通过with MyMixin语法引入了MyMixin的功能。

2. Mixin的特点
  • Mixin类本身不能被实例化,它们只能被用作其他类的组成部分。
  • 类可以使用多个Mixin,通过逗号分隔,这允许多个类的功能被组合到一个类中。
  • Mixin可以有自己的属性和方法,这些属性和方法可以被包含Mixin的类访问和使用。
  • 如果多个Mixin中有同名的方法或属性,那么包含Mixin的类必须通过显式指定使用哪个Mixin的方式来解决冲突。
  • Mixin的顺序很重要,因为方法冲突时会按照Mixin的顺序来解析。
3. Mixin的应用场景
3.1. 接口实现

Mixin可以用于实现接口,允许一个类同时具有多个接口的功能。

class MyWidget with WidgetMixin, ClickableMixin {// ...
}
3.2. 功能复用

Mixin可以用于将通用功能添加到多个类中,避免重复编写相似的代码。

mixin LoggerMixin {void log(String message) {print(message);}
}class MyClass with LoggerMixin {// ...
}
3.3. 数据序列化与反序列化

Mixin可以用于为多个数据模型类添加数据序列化和反序列化的功能。

mixin JsonSerializable {Map<String, dynamic> toJson();void fromJson(Map<String, dynamic> json);
}class Person with JsonSerializable {// ...
}
3.4. 路由导航

在Flutter中,Mixin经常用于处理路由导航,以减少页面之间的代码冗余。

3.5. 状态管理

在Flutter中,StatefulWidget常常使用Mixin来添加状态管理的功能。

with

with关键字用于在类定义中混入(mixin)一个或多个 mixin 类。Mixin 是一种在 Dart 中实现代码重用的机制,它允许你将一个或多个 mixin 类的特性添加到一个类中,而无需继承这些 mixin 类。

使用方式:

class MyClass with Mixin1, Mixin2, ... {// 类的成员和方法
}

关于 with 关键字的详细介绍:

  1. 混入Mixin的类:with 后面可以跟一个或多个 mixin 类,用逗号分隔。这意味着你可以从多个 mixin 类中继承特性,将它们组合到一个类中,从而实现多重继承的效果。

  2. Mixin的顺序:Mixin 的顺序很重要,因为如果多个 mixin 类中具有相同名称的属性或方法,类中将使用最后一个 mixin 中定义的属性或方法。这个规则确保了 mixin 类的顺序对类的行为产生影响。

  3. Mixin的特性:通过使用 with 关键字,类将继承 mixin 类的属性、方法和功能,这些特性会被添加到类中。这允许你在不继承 mixin 类的情况下,使用 mixin 类的功能。

  4. Mixin的用途:with 关键字通常用于以下情况:

  • 实现接口:通过混入一个 mixin 类,类可以实现多个接口的功能。
  • 代码复用:可以将通用功能添加到多个类中,以减少代码重复性。
  • 实现混合功能:在不使用多重继承的情况下,将多个 mixin 类的功能组合在一个类中。

dynamic和Object

1、Object 是dart所有对象的根基类,也就是说所有类型都是Object的子类,所以任何类型的数据都可以赋值给Object声明的对象.
2、dynamic与var一样都是关键词,声明的变量可以赋值任意对象. 而dynamic与Object相同之处在于,他们声明的变量可以在后期改变赋值类型.

typedef

用于创建自定义类型别名(type alias)。类型别名允许你为现有的数据类型或函数签名定义一个新的名称,以便在代码中更清晰地表达类型或函数签名的含义

以下是关于typedef关键字的详细介绍:

  1. 为数据类型创建类型别名:
typedef IntList = List<int>;
typedef StringMap = Map<String, String>;
  1. 为函数签名创建类型别名:
    对于回调函数或函数参数特别有用
typedef VoidCallback = void Function();
typedef BinaryOperation = int Function(int, int);
  1. 与高阶函数一起使用:
typedef FilterFunction<T> = bool Function(T);List<T> filterList<T>(List<T> list, FilterFunction<T> filter) {return list.where(filter).toList();
}

get

get关键字用于创建一个Getter方法,它允许你访问对象的属性或计算属性的值,就像访问类的实例变量一样。Getter方法通常用于获取对象的某个属性值,而不是直接访问实例变量,以提供更多的封装和控制。

1.创建Getter方法:通过在类中定义一个以get关键字开头的方法,你可以创建一个Getter方法,该方法用于获取某个属性的值。Getter方法的语法如下:

Type get propertyName {// 在这里计算和返回属性的值
}

其中,Type是属性的数据类型,propertyName是你希望暴露的属性名称。

2.延迟加载属性:Getter方法可以用于延迟加载属性的值。这意味着属性的值只有在首次访问Getter方法时才会计算,而不是在对象创建时。这对于节省资源和提高性能很有用。

class LazyLoader {List<int> _data = [1, 2, 3, 4];int get sum {// 计算并返回列表元素的总和return _data.reduce((a, b) => a + b);}
}

3.属性访问控制:使用Getter方法可以对属性的访问进行控制,例如,你可以在Getter方法中添加条件来检查属性的有效性,然后返回相应的值。

class Temperature {double _celsius;Temperature(this._celsius);double get celsius {if (_celsius < -273.15) {throw ArgumentError("Temperature cannot be below absolute zero.");}return _celsius;}
}

4.在子类中覆盖:Getter方法可以在子类中被覆盖,允许你根据需要自定义子类的属性访问行为。

class Parent {int get value => 42;
}class Child extends Parent {int get value => super.value * 2; // 在子类中覆盖Getter方法
}

未完待续…


http://www.ppmy.cn/news/1141142.html

相关文章

kubectl系列(六)-kubectl describe

要详细显示任意数量资源的状态&#xff0c;请使用该kubectl describe命令。默认情况下&#xff0c;输出还列出未初始化的资源。 1 查看有关特定节点的详细信息 kubectl describe nodes [node-name] 2 查看有关特定 Pod 的详细信息&#xff1a; kubectl describe pods [pod-…

TCP原理特性详解

文章目录 可靠传输机制1.确认应答2.超时重传2.连接管理1.三次握手2.四次挥手 传输效率1.滑动窗口2.流量控制3.拥塞控制4.延时应答5.捎带应答 面向字节流粘包问题 TCP异常情况 可靠传输机制 可靠性&#xff1a;即发送方知道数据是发送成功了&#xff0c;还是失败了。 1.确认应答…

vue run dev 配置nginx

由于项目有多个vue项目,在开发过程中需要联调,而不是每次发布后再联调. 比如有2个项目: main-project(主项目),test1-project. 由于是多项目,每个项目相当于有一个独立的域,这里test1-project设置域名称为test1 vue修改 在vite.config.ts中配置一个base:"/test1/"…

Stm32_标准库_8_ADC_光敏传感器_测量具体光照强度

ADC简介 测量方式 采用二分法比较数据 IO通道 ADC基本结构及配置路线 获取数字变量需要用到用到光敏电阻的AO口&#xff0c;AO端口接在PA0引脚即可 测得的模拟数据与实际光照强度之间的关系为 光照强度 100 - 模拟量 / 40;代码&#xff1a; 完整朴素代码&#xff1a; #in…

【yolo系列:yolov7改进wise-iou】

yolo系列文章目录 学习视频&#xff1a; YOLOV7改进-Wise IoU_哔哩哔哩_bilibili 代码地址&#xff1a; objectdetection_script/yolov7-iou.py at master z1069614715/objectdetection_script (github.com) 文章目录 yolo系列文章目录一、在yolov7之上进行替换二、在loss.p…

MySQL — 事务的传播级别有什么作用?有哪些事务的传播级别?

置顶 学习专栏&#xff1a;【Java后端面试题】 1.Java面试题—基础知识、面向对象、【容器】、IO & 【设计模式】、泛型 & 异常 & 反射 & 注解、快速排序2.Java面试题—并发基础、【同步 & 互斥】、JUC & 并发容器、【线程池】、异步编程、【Lambda表达…

CCRC 网络安全技术课程

1. Docker通过rm删除镜像。 &#xff08;1分&#xff09; [判断题] 【错误】 2. windows自带了Linux&#xff0c;所以Linux可以直接从windows商店安装。 &#xff08;1分&#xff09; [判断题] 【正确】 3. 使用docker连接到已运行容器的命令是&#xff1f; &#xff08;1分…

Docker linux 安装

sudo yum update sudo yum clean all sudo yum makecache#安装依赖 sudo yum install -y yum-utils device-mapper-persistent-data lvm2 #添加官方存储库 sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo#安装-跳过一些异常依赖…