flutter基础

qq_28285625

已于 2025-04-11 11:10:45 修改

阅读量2.4k

点赞数

分类专栏： flutter 文章标签： flutter 1024程序员节

于 2022-04-21 11:48:34 首次发布

本文链接：https://blog.youkuaiyun.com/qq_28285625/article/details/124318020

版权

flutter 专栏收录该内容

22 篇文章

订阅专栏

文章目录

Q&W

Q1: 什么时候使用await Navigator.push
W1: 1.当pop回来的值是future的时候，而await必须在async异步线程中使用。2.当pop回来想执行一些操作的时候。

pop回来执行数据刷新
await Navigator.of(context).push(CupertinoPageRoute<void>(
        builder: (context) => WebViewPage(
          url: xxx,
        )));
   _headerRefresh();

map.entries

map.entries 返回一个 Iterable<MapEntry<K, V>> 对象

Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              SizedBox(height: 48.h),
              ...map.entries.map((e) {
                return buildItem(e.key, e.value);
              }).toList()
            ],
          )

Text widget的使用心得

overflow，overflow属性是设置text宽度不够如何…的属性，这个属性得配合width使用，不然会不生效，设置width或者使用LimitedBox设置maxWidth
可以使用Expanded解决长度溢出的问题，这样会出现一个问题，Expanded让Text widget占用剩余屏幕宽度，如果有设置TextWidget居中的代码，就会无效，如果父widget是row，这是能设置Text内部的textAlign居中，如果是column，这样设置也不会效果，解决方案使用上面的1来解决
Text自动换行处理,flutter自动换行有几种场景：column中，row中,在Column中的Text不用任何处理，能够自动换行,在Row中需要用Expanded包裹。

compute和Isolate（待完成）

常见布局

左右结构的4种实现

在这里插入图片描述

Row(
  children: [
    Text("AAA"),
    Expanded(child: Text("")),
    Text("BBB"),
  ],
),
Row(
  children: [
    Text("CCC"),
    Spacer(),
    Text("DDD"),
  ],
),
Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween
  children: [
    Text("AAA"),
    Text("BBB")
  ],
),
Row(children: [
  Text("CCC"),
  Flexible(child: SizedBox(),fit: FlexFit.tight,),
  Text("DDD"),
],),

flutter的奇怪语法

=> 胖箭头

如果方法只有一行代码可以使用=>代替{}
语法 => 表达式是 { return 表达式; } 的简写， => 有时也称之为箭头函数

add(a,b)=> a+b;
test() => print("aaa");

…[]解构赋值

举例

Row(
children:[
Container(),
Container(),
if(xxx) ...[
	Text('aaa'),
	Text('ccc')],
] else ...[
	Text('bbb'),
	Text('ccc')
]
),

2个点

链式调用，在Dart中 “2个点” 不用在方法中返回调用主体; 尽管源码的实现方式也是通过set进去的,但我们看到的就是Dart给我们用的语法糖, 因为Dart本身就把成员变量的getter setter 方法改为隐式的了

var p = Person("Lily", 12)
  ..myPrint()
  ..myPrint1();

…和…? 将list插入到另一个list里（set，map同样适用）

List ccc = [1,2,3];
List ddd = [0,...ccc,4];
print(ddd);
打印：[0, 1, 2, 3, 4]

在布局里的使用
Column(children:[
Text('aaa'),
...list.map((e) => Text(e)).toList(),
Text('ccc'),
]),

…?就是可以将可null的list加入到另一个list里，避免产生异常

####  {}可选参数与可空参数

int? status可空参数，必传，传的值可以为空
Color _getStatueColor(int? status) {return “”;}
{int? status}可选参数，可传，可不传
Color _getStatueColor({int? status}) {return “”;}

#### ??= 为值为null的变量赋值，如果变量不为null，变量值不变

var bbb;
bbb ??= 4;
print(bbb);
打印：4
var bbb = 2;
bbb ??= 4;
print(bbb);
打印：2

bbb为null的时候??=4才会生效，否则bbb的值不变,相当于bbb = bbb ?? 4;

#### list.where((element)=>).forEach((element){})（Set也适用）

var eee = [3,4,5,6,7,8];
eee.where((element) => element > 5).forEach((element) {print(element); });
打印：
6
7
8

#### toList() 迭代

str.split(“”)
//每一个字母都用一个Text显示,字体为原来的两倍
.map(© => Text(c, textScaleFactor: 2.0,))
.toList()

### 构造函数

class Point {
double x = 0;
double y = 0;

Point(double x, double y) {
// See initializing formal parameters for a better way
// to initialize instance variables.
this.x = x;
this.y = y;
}
}
使用this关键字引用当前实例
当且仅当命名冲突时使用this关键字才有意义，否则Dart会忽略this关键字

### ListView的使用
ListView构造函数
> 适合少量item的list，item全部提前创建，没有基于Sliver懒加载

ListView(
children: getListChildren(),
shrinkWrap: true,
padding: const EdgeInsets.all(25),
itemExtent: 20,
),
…
List getListChildren() {
return [new Text(“one”),new Text(“two”),new Text(“three”)];
}

#### ListView.build 
> 基于Sliver懒加载模型，适合有大量item的ListView
#### ListView.separated 类似iOS tableview的header

     ListView.separated(
          itemBuilder: (context, index) => Text("第$index行"),
          separatorBuilder: (context, index) {
            return (index % 2 == 0)
                ? Container(
                    color: Colors.green,
                    height: 20,
                  )
                : Container();
          },
          itemCount: 10,
          shrinkWrap: true,
        ),

### Interable
#### map

var languages = [‘Dart’, ‘Kotlin’, ‘Java’, ‘Javascript’, ‘Go’, ‘Python’, ‘Swift’];
print(languages.map((language) => ‘develop language is ${language}’).join(‘—’));

打印：develop language is Dart—develop language is Kotlin—develop language is Java—develop language is Javascript—develop language is Go—develop language is Python—develop language is Swift

> 关于join 
> “concatenates the strings, with the [separator] string interleaved between the elements.”
> join会将separator连接在元素之间，所以最后一个元素后面不会有separator)
#### any
> any函数主要用于检查是否存在任意一个满足条件的元素，只要匹配到第一个就返回true, 如果遍历所有元素都不符合才返回false. any函数接收一个bool test(E element)函数作为参数，test函数回调一个E类型的element并返回一个bool类型的值。

bool isExitGo = languages.any((element) => element == ‘Go’);
print(‘isExitGo-${isExitGo?“exit”:‘no exit’}’);

打印：
isExitGo-exit

#### every
> every函数主要用于检查是否集合所有元素都满足条件，如果都满足就返回true, 只要存在一个不满足条件的就返回false. every函数接收一个bool test(E element)函数作为参数，test函数回调一个E类型的element并返回一个bool类型的值。

bool isGoAll = languages.every((element) => element == ‘Go’);
print(‘isGoAll-${isGoAll}’);

打印：
isGoAll-false

#### where
> where函数主要用于过滤符合条件的元素，类似Kotlin中的filter的作用，最后返回符合条件元素的集合。 where函数接收一个bool test(E element)函数作为参数，最后返回一个泛型参数为E的Iterable。类似map一样，where这里也是返回一个惰性的Iterable<E>, 然后对它的iterator进行迭代，对每个元素都执行test方法。

List numbers = [1,2,3,4,5,6,7,8,9];
print(numbers.where((element) => element > 6));

打印：
(7, 8, 9)

#### firstWhere,lastWhere,singleWhere
> firstWhere主要是用于筛选顺序第一个符合条件的元素，可能存在多个符合条件元素；
> lastWhere主要是用于筛选顺序最后一个符合条件的元素，可能存在多个符合条件元素；
> singleWhere主要是用于筛选顺序唯一一个符合条件的元素，不可能存在多个符合条件元素，存在的话就会抛出异常IterableElementError.tooMany()， 所以使用它的使用需要谨慎注意下

print(numbers.firstWhere((element) => element == 11,orElse: () => -1));
print(numbers.lastWhere((element) => element == 1,orElse: () => -1));
print(numbers.singleWhere((element) => element == 1,orElse: () => -1));

打印：
-1
1
1

#### take
> take函数主要是用于截取原集合前count个元素组成的集合，take函数接收一个count作为函数参数，最后返回一个泛型参数为E的Iterable。类似where一样，take这里也是返回一个惰性的Iterable<E>, 然后对它的iterator进行迭代。

print(numbers.take(5));

打印：
(1, 2, 3, 4, 5)

#### takeWhere
> takeWhile函数主要用于依次选择满足条件的元素，直到遇到第一个不满足的元素，并停止选择。takeWhile函数接收一个test条件函数作为函数参数，然后返回一个惰性的Iterable<E>。

print(numbers.takeWhile((value) => value < 3));//3是count

打印：
(1, 2)

#### skip
> skip函数主要是用于跳过原集合前count个元素后，剩下元素组成的集合，skip函数接收一个count作为函数参数，最后返回一个泛型参数为E的Iterable。类似where一样，skip这里也是返回一个惰性的Iterable<E>, 然后对它的iterator进行迭代。

print(numbers.skip(3));//3是count

打印：
(4, 5, 6, 7, 8, 9)

#### shipWhere
> skipWhile函数主要用于依次跳过满足条件的元素，**直到遇到第一个不满足的元素**，并停止筛选。skipWhile函数接收一个test条件函数作为函数参数，然后返回一个惰性的Iterable<E>。

List numbers1 = [3, 1, 2, 7, 12, 2, 4];
print(numbers1.skipWhile((value) => value < 4));

打印：
(7, 12, 2, 4)

#### followedBy
> followedBy函数主要用于在原集合后面追加拼接另一个Iterable<E>集合，followedBy函数接收一个Iterable<E>参数，最后又返回一个Iterable<E>类型的值。

print(languages.followedBy([‘C++’,‘C’]));

打印：
(Dart, Kotlin, Java, Javascript, Go, Python, Swift, C++, C)

#### expand
>

var pair = [
[1,2],
[3,4]
];
print(pair.expand((element) => element));
var inputs = [1,2,3];
print(inputs.expand((element) => [element,element,element]));

打印：
(1, 2, 3, 4)
(1, 1, 1, 2, 2, 2, 3, 3, 3)

#### reduce & fold
> reduce函数主要用于集合中元素依次归纳(combine)，每次归纳后的结果会和下一个元素进行归纳，它可以用来累加或累乘，具体取决于combine函数中操作，combine函数中会回调上一次归纳后的值和当前元素值，reduce提供的是获取累积迭代结果的便利条件. fold和reduce几乎相同，唯一区别是**fold可以指定初始值**。 但是需要注意的是，combine函数返回值的类型必须和集合泛型类型一致。

print(numbers1.reduce((value, element) => value+element));//累加
print(numbers1.reduce((value, element) => value+element)/numbers1.length);//平均数
print(numbers1.reduce((value, element) => value*element));//累乘

### yield &&  yield*
>「yield关键字」在生成器函数中是用于依序生成每一个值，它有点类似return语句，但是和return语句不一样的是执行一次yield并不会结束整个函数。相反它每次只提供单个值。

> yield*后面则是跟着一个函数，一般会跟着递归函数，通过它就能实现类似二次递归函数功能。

> yield关键字能实现一个二次递归函数但是比较复杂，但是如果使用yield关键字就会更加简单。

//这是使用yield实现二次递归函数
Iterable naturals(n) sync* {
if (n > 0) {
yield n;
for (int i in naturals(n-1)) {
yield i;
}
}
}

//这是使用yield实现的二次递归函数
Iterable naturals1(n) sync {
if ( n > 0) {
yield n;
yield* naturals(n-1);
}
}



### 快捷键
1. stful
2. stless
3. 生产构造函数 commond+n
4. command+fn+f12 查看当前类结构
5. 抽离方法:选中后ctrl+alt+m
6. Stateless转StateFul： option+回车


## 参考
[ListView的4种使用](https://budaye.blog.youkuaiyun.com/article/details/108672262)
[Iterable](https://zhuanlan.zhihu.com/p/90373910)