flutter-开发问题系列之二   2021-10-23


这是 todoline++ 项目开发过程中遇到的问题系列, 记录下来供大家参考。
本篇记录一些疑问, 都是初始使用 flutter 时遇到的低级问题!

01) flutter Container.padding 如何使用?

1
2
3
Container(
  padding: EdgeInsets.fromLTRB(16.0, 0, 0, 0),
)

02) flutter 组件按照比例来分配左右两个组件的宽度? 怎么做?

使用 Expanded, Expanded 可以让多个组件在同一行中按照某个比例占据屏幕的宽度,代码如下:

1
2
3
4
5
6
7
Expanded(
  flex: 2,
  child: Container(
	child: Icon(Icons.account_balance_wallet),
	color: Colors.greenAccent,
  ),
),

A) child: 不用解释, 就是显示的内容
A) flex: 权重, 也就是填写一个正整数, 用于表示在所有组件中的比例, 比例计算公式如下: 

1
比例1 = 权重1/(权重1+权重2+权重3...)

03) 如何让组件居中, 居左, 居右?

A) 使用 container 组件, 并且设置 aligment

1
2
3
4
Container(
  alignment: Alignment(0, 0),
  child: Text("09-10"),
)

0,0 表示居中, 第一个数值用来表示水平方向, 第二个数值用来表示垂直方向, -1 表示偏左或者偏上, 1 表示偏右或者偏下, 这样就可以产生左上, 中上, 右上等9个位置。

B) 使用 Expanded 组件, 参见本文的 02)

04) Flutter Text 组件如何设置字体大小?

1
2
3
4
Text(
  "update report update report update report",
  style: TextStyle(fontSize: 24)
),

使用 Text.style.fontSize 来设置字体大小

05) 突然间发现文字不对齐了, 之前是对齐的, 怎么办?

解决方法:
现在的IDE都有修改记录, 跟历史记录比较, 看看返回到某个时间点后是不是对齐了, 如果是, 在进一步找出代码不相同的地方, 然后找出不对齐的原因。
在这个例子中, 是因为把 Text 组件改成 TextButton 引起。

注意:

这个问题可以引申为, 之前好好的, 怎么现在就不行了呢?, 解决办法还是采用这种方法, 折半查找, 最多半个钟头就可以.

06) dart 如何将字符串转化为 ascii 码?

A） 引入两个包
import ‘dart:convert’;
import ‘dart:typed_data’;
B) 转换
Uint8List list = AsciiCodec().encode(userCode);
return list[0];

07) dart 如何将数值转化为字符串并自动在前面补 0?

A) 方法1
1.toString().padLeft(3, “0”); // 长度3位, 不够就补0

B) 方法2
NumberFormat(non null-safety)

1
2
3
4
a) dependencies: intl: "^0.16.1"
b) import import "package:intl/intl.dart";
c) NumberFormat formater = new NumberFormat("000");
d) formater.format(1);

来源: blog.csdn.net/m0_59449563/article/details/118546177

08) flutter 开发如何去掉 debug 标识

1
2
3
MaterialApp(
  debugShowCheckedModeBanner: false,
）

来源: zhuanlan.zhihu.com/p/140025784

09) flutter 的 Icon 列表在哪里找?

如果想查找 某个 Icon ? 在哪里找? 下面地址可以查找:
api.flutter.dev/flutter/material/Icons-class.html

10) Future<T> 对象, 如何获取它的值, 也就是如何获取 T ?

1
2
3
theFuture.then((val) {
  print(val);
});

详细请参考:
api.dart.dev/stable/2.14.4/dart-async/Future-class.html#instance-properties

11) sqlite 如何生成唯一id?

背景:

totoline++ 项目会在多个设备进行数据同步, 而且未来有可能会在多个用户间进行数据同步, 如何保证 sqlite 数据表的 id 唯一?

解决办法:

时间戳+机器码+随机数

难点:

如何生成用户的机器码并且确保唯一, 并且保证在多个用户的多台设备中保持唯一?
A）根据用户邮箱或者用户名来生成
B) 根据用户系统特征来生成
C) 随即数生成机器码
D) 自定机器码为某个字符串, 然后根据 hashcode 来生成

上面这些办法都无法保证机器码唯一, 原因是, 为了查询性能, 我们倾向于使用正整数来表示数据表id, 但是上面这些办法中, 有些是字符串, 因此需要转换成数值类型, hashcode 无法保证唯一, 随机数也有可能重复, 最要命的是, dart 语言的 int 类型, 最大长度是 19 位数, 而时间戳已经是13位数, 只剩下7位数可以使用了, 还需要减去随机数的位数, 机器码的位数不多, 而且他也不需要那么多, 因为在一个人的朋友圈里面, 不会超过一千人, 所以只需要3位数就够了。

解决方案:

根据用户邮箱来判断用户名, 然后截取用户名前面3个字符作为机器标识(字符串), 在根据机器标识生成机器码, 机器码是数值, 最终生成数据表Id.

机器码这有可能重复, 怎么办？ 允许用户设置机器标识。

相关问题:

hashcode 有多大可能是重复的?

答案: blog.csdn.net/maxwell_nc/article/details/46916047
建议: 应该转换成小写后在获取 hashcode 的值

12) dart 如何获取当前时间戳

print(DateTime.now().millisecondsSinceEpoch)

13) dart 如何生成随机数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import 'dart:math';
int r = Random().nextInt(3);
~~~    
  
# 14) flutter 如何获取 TextFiled 的值?
A) 首先定义一个 controller, 以便于标识这个控件
TextEditingController emailController = new TextEditingController();

B) 让 TextFiled 的 controller 属性为上面定义的 controller.
TextField(
  controller: emailController,
)

C) 通过 controller.text 属性获取值
String email = emailController.text;
       
# 15) flutter TextField 如何获取焦点?
cnblogs.com/gxsyj/p/11156323.html
    
# 16) flutter 弹出提示框(Toast)
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
	backgroundColor: Colors.green,
	content: Text("Invalid Email Address!"),
));

    
# 17) dart - Stream 如何使用
floor 的 dao 操作中, 总是返回 Stream<User> 之类, Stream 如何使用呢?
~~~dart
Stream<User> userStream = xxxx;
userStream.listen((user){
	print(user.id);
});

来源:
jianshu.com/p/f9af079782af
api.dart.dev/stable/2.14.4/dart-async/Stream/Stream.value.html

18) dart 如何延迟执行

1
2
3
Future.delayed(Duration(milliseconds: 2000), () {
  // todo something
})

19) 手机界面各个部分说明:

blog.csdn.net/cleverGump/article/details/85602372

20) flutter 如何获取屏幕宽度和高度?

1
2
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width

21) 如何修改 appBar 的背景色和前景色?

1
2
3
4
5
6
7
8
9
10
11
12
13
appBar: AppBar(
  elevation: 0.5,
  brightness: Brightness.light,
  backgroundColor: Colors.white,
),
~~~    

# 22) flutter 如何使用正则表达式?
~~~dart
static bool isEmail (String email) {
	RegExp re = RegExp(r'^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$');
	return re.hasMatch(email);
}

25) flutter 中如何查询 Colors.green 的颜色值?

api.flutter.dev/flutter/material/Colors-class.html

26) flutter 如何修改 TextFiled 中的 hintText(placeHolder) 颜色?

1
2
3
4
5
6
7
TextField(
  controller: controller,
  decoration: InputDecoration(
    hintText: placeholder,
    hintStyle: const TextStyle(color: AppColor.primaryColorLight),
  ),
);

27) flutter 如何修改 TextFiled 的边框颜色?

边框颜色有两个颜色, 获取焦点时显示的颜色和失去焦点时显示的颜色
通过修改 enabledBorder 和 focusedBorder 可以调整边框在选中和失焦时的颜色
来源: jianshu.com/p/cf639c88eadd

28) 我选取某个颜色为主色, 如何知道哪个颜色跟该颜色搭配比较好看?

1
www.paletton.com

29) flutter 中 sqlite 的 ORM 框架哪个最好?

能够选用的框架有: sqflite, sqlentity, floor, 个人觉得 floor 比较好, 因为他的使用方法很像 android 中的 room 框架, 地址以及操作说明如下:

1
2
A) pub.dev/packages/floor
B) floor.codes

分享到:


  如果您觉得这篇文章对您的学习很有帮助, 请您也分享它, 让它能再次帮助到更多的需要学习的人. 您的支持将鼓励我继续创作 !
本文基于署名4.0国际许可协议发布，转载请保留本文署名和文章链接。 如您有任何授权方面的协商，请邮件联系我。

Contents

  1. 01) flutter Container.padding 如何使用?
  2. 02) flutter 组件按照比例来分配左右两个组件的宽度? 怎么做?
  3. 03) 如何让组件居中, 居左, 居右?
  4. 04) Flutter Text 组件如何设置字体大小?
  5. 05) 突然间发现文字不对齐了, 之前是对齐的, 怎么办?
    1. 注意:
  • 06) dart 如何将字符串转化为 ascii 码?
  • 07) dart 如何将数值转化为字符串并自动在前面补 0?
  • 08) flutter 开发如何去掉 debug 标识
  • 09) flutter 的 Icon 列表在哪里找?
  • 10) Future<T> 对象, 如何获取它的值, 也就是如何获取 T ?
  • 11) sqlite 如何生成唯一id?
    1. 背景:
    2. 解决办法:
    3. 难点:
    4. 解决方案:
    5. 相关问题:
  • 12) dart 如何获取当前时间戳
  • 13) dart 如何生成随机数
  • 18) dart 如何延迟执行
  • 19) 手机界面各个部分说明:
  • 20) flutter 如何获取屏幕宽度和高度?
  • 21) 如何修改 appBar 的背景色和前景色?
  • 25) flutter 中如何查询 Colors.green 的颜色值?
  • 26) flutter 如何修改 TextFiled 中的 hintText(placeHolder) 颜色?
  • 27) flutter 如何修改 TextFiled 的边框颜色?
  • 28) 我选取某个颜色为主色, 如何知道哪个颜色跟该颜色搭配比较好看?
  • 29) flutter 中 sqlite 的 ORM 框架哪个最好?