flutter-开发问题系列之五   2021-10-30


这是 todoline++ 项目开发过程中遇到的问题系列, 记录下来供大家参考。
本篇记录一些疑问

todoline++ 官网请看这里: https://todoline-plus-plus.github.io/

1 flutter 中的 drawer 组件, 通过 hoverColor 可以改变鼠标经过时的背景色, 但是无法改变他的字体颜色, 怎么办?

目前(2021-10-30)还没有办法解决这个问题

2 实体类使用驼峰命名法, sqlite 表字段名称会区分大小写吗?

背景

项目使用 sqlite 来存储数据, 使用 floor 来做映射, floor 会自动根据实体类来生成数据表。

疑问

如果实体类的成员变量采用驼峰命名法, 映射成数据表后, 如果数据库不区分大小写，会不会报错?

答案

sqlite 默认对大小写敏感, 如果不想区分大小写, 需要配置, 与之相反的是, mysql 默认对大小写不敏感, 如果需要对大小写敏感, 需要配置。

所以, 答案是:可以.

来源:

cnblogs.com/zhuawang/archive/2013/01/15/2861566.html

3 sqlite 可以使用枚举类型吗?

答案

sqlite 没有枚举类型, 只有最基本的 null, integer, real, TEXT, BLOB, 但可以使用 TEXT 和 CHECK 来限制他的值, 这就等同于枚举类型。 由于考虑到这种方式效率不是很高, 所以我使用 int 来代替, 再在代码中进行转换。

来源:

stackoverflow.com/questions/5299267/how-to-create-enum-type-in-sqlite

4 dart 语言, int 如何转换为 enum?

1
2
3
4
enum Sex{
male,
female
}
1
2
int idx = 1;
print(Sex.values[idx]); // female

stackoverflow.com/questions/51190035/flutter-dart-convert-int-to-enum

5 sqlite 的基本数据类型并没有 boolean 数据类型, 但是如果我的实体类成员变量是 bool 类型, 通过 floor 框架自动映射, 保存在数据库里面的是什么类型呢? 我该如何查询呢？

答案:

保存在数据库里面是 integer 类型, 这是大多数数据库的处理方式, sqlite 还支持查询语句中直接使用 true 和 false 值:

1
select * from table where col = true;
来源:

blog.csdn.net/weixin_45488228/article/details/104377915

6 sqlite 如何获取系统时间戳？

1
select strftime('%s','now');

但是我发现, sqlite 的系统时间戳只有 10 位数, 而 dart 语言或者 js 获取的系统时间戳是 13 位数, 怎么回事?

7 flutter 如何隐藏控件?

1
2
3
4
5
6
7
Visibility(
  visible: false,
  child: Text(
	dateTime.day.toString(),
	style: defaultTextStyle,
  )
)
来源:

blog.csdn.net/haha223545/article/details/102796137

8 flutter 日期选择器中, CupertinoDatePicker 需要结合 showModalBottomSheet 来显示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
showModalBottomSheet(
  context: context,
  builder: (context) {
	return CupertinoDatePicker(
	  onDateTimeChanged: (DateTime value) {
		setState(() {
		  _datetime = value;
		});
	  },
	  initialDateTime: _datetime,
	  mode: CupertinoDatePickerMode.date,
	  maximumYear: 2300,
	  minimumYear: 2021,
	);
  }
);
注意:

CupertinoDatePicker 可以正常在 android 中运行, 但是在 windows 中无法选择。

9 想定制化一个日期选择器, 该用哪个最好?

现成的控件中, 下面这个组件功能最多最好, 至少他的实例里面有介绍
pub.dev/packages/syncfusion_flutter_datepicker

问题

1） 开源协议不可靠,
2） 他提供的实例代码无法使用

关于日期选择器的相关资料:
1
2
3
4
5
www.cnblogs.com/joe235/p/11978304.html	
https://help.syncfusion.com/flutter/daterangepicker/customizations
https://pub.dev/packages/syncfusion_flutter_datepicker
https://pub.dev/packages/flutter_rounded_date_picker(ok)
https://medium.com/enappd/building-a-flutter-datetime-picker-in-just-15-minutes-6a4b13d6a6d1(https://pub.dev/packages/flutter_datetime_picker/example)

10 dart 语言中在变量的后面添加感叹号是什么意思?

由于 dart 语言存在 null-safety 的机制, 就产生一个变量是非 null-safety, 另外一个变量是 null-safety, 这样的话, 如果把非 null-safety 的变量赋值给 null-safety 的变量, 就会产生下面的报错:

1
a value of int? can’t be assigned to a variable type of ‘int’

这个时候, 我们只需要在他的后面添加感叹号就可以了, 个人的理解是, 告诉 dart, 我确保他是 null-safety 的。

11 flutter 如何让组件位于屏幕的底部?

查看了网上的资料, 说下面的代码可以让按钮处于屏幕的底部

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class Body extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
	return Align(
	  alignment: Alignment.bottomCenter,
	  child: RaisedButton(
		onPressed: () {},
		child: const Text('Bottom Button!', style: TextStyle(fontSize: 20)),
		color: Colors.blue,
		textColor: Colors.white,
		elevation: 5,
	  ),
	);
  }
}

来源: flutterforyou.com/how-to-place-a-button-at-bottom-of-the-screen-in-flutter/

Alignment.bottomCenter 是让按钮处于底部的关键,但是我怎么测试都不行, 后来转念一想, 有可能是我要求处于左侧滑出菜单的底部, 这个左侧菜单有特殊要求, 所以才没有处于底部, 于是又改成下面的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
drawer: Drawer(
  child: Column(
	mainAxisSize: MainAxisSize.max,
	children: <Widget>[
	  Text('Top'),
	  Expanded(
		child: Align(
		  alignment: Alignment.bottomCenter,
		  child: Text('Bottom'),
		),
	  ),
	],
  ),
),
注意:

A) Column 不能使用 ListView 来代替， 否则将无法达到效果
B) 感觉上, Expanded 和 Align 两个组件需要配合使用, 但是没有亲自测试是否可以缺少其中某一个组件。

来源:

stackoverflow.com/questions/50471025/flutter-align-button-to-bottom-of-drawer

13 dart 语言可以重新定义变量

dart 语言中, 下面的代码竟然不会报错:

1
2
3
4
5
6
String a = "a";
if (a == "a") {
  String a = "b";
  print("first a is ${a}");
}
print("second a is ${a}");

注意, a 定义了两次, 在 java 中肯定会报错, 但是 dart 竟然不报错, 第二次等于重新定义了这个变量, 但是作用域仅限于 if 语句块, 出了这个范围就使用第一次定义的值。

打印效果如下:

1
2
first a is b
second a is a

14 flutte 如何限制只能输入数字?

1
2
3
4
5
6
7
8
9
10
import 'package:flutter/services.dart';

TextField(
  keyboardType: TextInputType.number,//键盘类型，数字键盘
  inputFormatters: <TextInputFormatter>[
	WhitelistingTextInputFormatter.digitsOnly,//只输入数字
	LengthLimitingTextInputFormatter(6)//限制长度
  ],
  onChanged: _listenCpyCode,
),

WhitelistingTextInputFormatter 代码准备过期, 请使用 FilteringTextInputFormatter 代替:

1
2
3
4
5
inputFormatters: [
  // FilteringTextInputFormatter.digitsOnly,//数字，只能是整数
  FilteringTextInputFormatter.allow(RegExp("[0-9.]")),//数字包括小数
  FilteringTextInputFormatter.allow(RegExp("[a-zA-Z]")),//只允许输入字母
],

15 flutter 如何实现淡入淡出效果

1
2
3
4
5
6
7
child: AnimatedOpacity(
  duration: const Duration(seconds: 10),
  opacity: 1.0,
  child: Center(
	child: this.widget,
  ),
),

AnimatedOpacity 可以实现这个效果, 但是自己测试好像效果不是很好

来源:

blog.csdn.net/weixin_33842304/article/details/88024657

16 showDatePicker 显示日历后如何限制不让选择某个日期?

1
2
3
4
5
6
7
8
9
10
showDatePicker(
  context: context,
  initialDate: DateTime.now(), //selected date
  firstDate: DateTime(2020), // start date
  lastDate: DateTime(2100),
  selectableDayPredicate: (DateTime val) => val.day < DateTime.now().day ? false : true, // date selectable setting
).then((val){
  if (val == null) return;
  Message.toast(context, "${val}");
});

使用 selectableDayPredicate 来做限制

参考:

stackoverflow.com/questions/51683646/how-do-i-use-the-selectabledaypredicate-to-limit-my-datepicker-to-only-weekdays

17 dart 如何设置回调函数?

我们调用其他人开发的函数, 我们希望他们处理完成后要有反馈, 这个时候我就需要调用他们定义的回调函数, 反过来, 我给其他人提供支持, 我们希望处理完成后通知他们, 如何定义回调函数?
java 中, 我们可以通过定义一个接口类, 然后在我们提供函数的参数中定义该接口类, 处理完成后, 调用他就可以通知使用者, dart 如何处理这个问题呢?
A) 首先, 我们得定义一个类似的接口类:
   typedef ICallbackClass = Function(DateType type);
   
B) 接着, 我们提供一个函数, 该函数让使用者来调用, 函数的方法中传入一个参数, 参数的数据类型为我们定义的接口类, 然后直接把该参数当作方法来调用就可以了:
   void myMethod(ICallbackClass callback) {
      // todo something
      callback(type);
   }

18 dart 如何定义和使用枚举类型?

A) 定义枚举类型

1
2
3
4
5
enum ClassName {
  item1,
  item2,
  item3
}

B) 使用枚举类型

1
ClassName.item1

19 flutter 如何画分割线?

1
Divider(height: 1.0,indent: 0.0,color: Colors.grey);

来源: blog.csdn.net/changzengli/article/details/88906957

20 dart 如何强制类型转换?

dart 无法强制类型转换, 在 java 中, 下面的代码可以正常运行

1
2
Map<String, Object> map = {"a": "b", "c": 5};
String a = (String) map.get("a"); // 强制类型转换

但是 dart 语言不行, 第二行将会报错, 解决办法:
使用 String 来代替 Object, 数值先转换成字符串在存储到 Map 中, 获取后在转换成数值。

21 flutter 中, 下列组件没有 height 属性可以设置怎么办?

在外层添加 SizeBox 来解决:
RaisedButton、FloatingActionButton、FlatButton、OutlineButton, TextButton

22 flutter 时间选择器

1
2
3
4
5
6
7
8
9
showDatePicker(
  context: context,
  initialDate: DateTime.now(), //选中的日期
  firstDate: DateTime(2020), //日期选择器上可选择的最早日期
  lastDate: DateTime(2100), //日期选择器上可选择的最晚日期
).then((val){
  if (val == null) return;
  Message.toast(context, "${val}");
});
来源:

cnblogs.com/joe235/p/11978304.html

23 flutter 如何设置背景色?

全局统一: MaterialApp.theme.scaffoldBackgroundColor
单个页面: Scaffold.backgroundColor

来源:

stackoverflow.com/questions/43822671/how-do-i-set-the-background-color-of-my-main-screen-in-flutter

24 flutter Text 如何设置粗体字?

Text.style.fontWeight = FontWeight.bold

25 flutter card 组件如何设置标题?

我的做法是, 在 children 的第一行添加 row, 然后使用这个 row 来作为标题进行设置

26 dart Map 如何根据 key 来取值

1
2
List<Map<String, String>> dataList = [{"title":"","duration":"5m","datetime": "09-10"}];
String title = dataList[0]["title"]; // java: dateList.get("title");

27 dart 如何赋值的同时设置默认值?

1
String str = b ?? "u"; // 如果 b 为空, str 默认为 "u";

两个问好就可以设置默认值

28 flutter 中的 Container, Column, Row, Expanded, 如何自适应高度?

设置 mainAxisSize 属性:

1
mainAxisSize: MainAxisSize.min

29 flutter Container 如何实现圆角

1
2
3
4
5
return Container(
  decoration: BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(4.0)), color: Colors.white),      
  // color: Colors.white,
  child: xxxx,
);

注意: decoration 和 color 不可以同时设置， 否则报错。
来源: cloud.tencent.com/developer/article/1738551

30 flutter appBar 添加菜单后, 如何修改菜单图标的颜色?

1
2
3
AppBar(
  iconTheme: IconThemeData(color: AppColor.primaryColor),
)

使用 iconTheme 来修改那三个横杠的颜色。

来源: stackoverflow.com/questions/51658440/changing-drawer-icon-color-flutter

31 flutter 如何实现遮罩效果?

A) 下面的代码可以实现弹出遮罩效果的窗口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
static void cover(BuildContext context, Widget widget) {
	showGeneralDialog(
	  context: context,
	  barrierLabel: "",
	  barrierDismissible: true,
	  barrierColor: Colors.black.withOpacity(0.8),
	  transitionDuration: const Duration(milliseconds: 200),
	  transitionBuilder: (
		  BuildContext context, Animation<double> animation,
		  Animation<double> secondaryAnimation, Widget child
		  ) {
		return ScaleTransition(scale: animation, child: child);
	  },
	  pageBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
		return widget;
	  },
	);
}

B) 下面的语句可以通过代码关闭遮罩效果的窗口

1
Navigator.pop(context);

来源: stackoverflow.com/questions/50683524/how-to-dismiss-flutter-dialog

32 flutter 内置的弹窗系列

1
www.cnblogs.com/mengqd/p/12526884.html

分享到:


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

Contents

  1. 1 flutter 中的 drawer 组件, 通过 hoverColor 可以改变鼠标经过时的背景色, 但是无法改变他的字体颜色, 怎么办?
  2. 2 实体类使用驼峰命名法, sqlite 表字段名称会区分大小写吗?
    1. 背景
    2. 疑问
    3. 答案
    4. 来源:
  • 3 sqlite 可以使用枚举类型吗?
    1. 答案
    2. 来源:
  • 4 dart 语言, int 如何转换为 enum?
  • 5 sqlite 的基本数据类型并没有 boolean 数据类型, 但是如果我的实体类成员变量是 bool 类型, 通过 floor 框架自动映射, 保存在数据库里面的是什么类型呢? 我该如何查询呢？
    1. 答案:
    2. 来源:
  • 6 sqlite 如何获取系统时间戳？
  • 7 flutter 如何隐藏控件?
    1. 来源:
  • 8 flutter 日期选择器中, CupertinoDatePicker 需要结合 showModalBottomSheet 来显示
    1. 注意:
  • 9 想定制化一个日期选择器, 该用哪个最好?
    1. 问题
    2. 关于日期选择器的相关资料:
  • 10 dart 语言中在变量的后面添加感叹号是什么意思?
  • 11 flutter 如何让组件位于屏幕的底部?
    1. 注意:
    2. 来源:
  • 13 dart 语言可以重新定义变量
  • 14 flutte 如何限制只能输入数字?
  • 15 flutter 如何实现淡入淡出效果
    1. 来源:
  • 16 showDatePicker 显示日历后如何限制不让选择某个日期?
    1. 参考:
  • 17 dart 如何设置回调函数?
  • 18 dart 如何定义和使用枚举类型?
  • 19 flutter 如何画分割线?
  • 20 dart 如何强制类型转换?
  • 21 flutter 中, 下列组件没有 height 属性可以设置怎么办?
  • 22 flutter 时间选择器
    1. 来源:
  • 23 flutter 如何设置背景色?
    1. 来源:
  • 24 flutter Text 如何设置粗体字?
  • 25 flutter card 组件如何设置标题?
  • 26 dart Map 如何根据 key 来取值
  • 27 dart 如何赋值的同时设置默认值?
  • 28 flutter 中的 Container, Column, Row, Expanded, 如何自适应高度?
  • 29 flutter Container 如何实现圆角
  • 30 flutter appBar 添加菜单后, 如何修改菜单图标的颜色?
  • 31 flutter 如何实现遮罩效果?
  • 32 flutter 内置的弹窗系列