Flutter 你需要知道的那些事 01

1. width 属性

对于设置控件宽度填充父控件这件事情,在 Android 里面,只需要设置 MATCH_PARENT 即可。

但是在 Flutter 里面却不是这样,因为 Flutter 要具体的数值。

所以我们可以这样考虑,假设我这个值非常大,比所有市面上的设备宽度还要大,那么是不是表现出来就是充满父控件了。

所以这边的做法是设置为无限,即 double.infinite

我们以一个常用场景来说明。

比如设置图片填充屏幕宽度。

刚开始没有设置的代码如下:

1import 'package:flutter/material.dart'; 2 3void main() => runApp(MyApp()); 4 5class MyApp extends StatelessWidget { 6 @override 7 Widget build(BuildContext context) { 8 return MaterialApp( 9 home: Scaffold( 10 appBar: AppBar( 11 title: Text('My Flutter'), 12 ), 13 body: Center( 14 child: Image.asset('assets/images/example.jpeg'), 15 ), 16 ) 17 ); 18 } 19} 20复制代码 21

效果:

可以看到没有设置的情况下,显示会根据图片自身的宽高显示。

这个时候如果设置 width 为无穷大,修改代码如下:

1child: Image.asset('assets/images/example.jpeg', width: double.infinity,), 2复制代码 3

效果

什么情况,没起作用?

这个时候不要慌,我们来给大家分析分析。

以后大家遇到类似问题也可以这样分析。

我们通过给 Image 外面套上一层 Container,然后设置背景颜色来对比一下。

代码如下:

1import 'package:flutter/material.dart'; 2 3void main() => runApp(MyApp()); 4 5class MyApp extends StatelessWidget { 6 @override 7 Widget build(BuildContext context) { 8 return MaterialApp( 9 home: Scaffold( 10 appBar: AppBar( 11 title: Text('My Flutter'), 12 ), 13 body: Center( 14 child: Container( 15 color: Colors.blue, 16 //left 17// child: Image.asset('assets/images/example.jpeg',), 18 //right 19 child: Image.asset('assets/images/example.jpeg', width: double.infinity,), 20 ), 21 ), 22 )); 23 } 24} 25复制代码 26

效果如下:

可以看到,设置宽度之后,Image 确实是填充了宽度,只不过由于图片本身没有那么宽,因此看起来就以为是没有起作用。

那么如何让图片可以填充宽度呢?

这个就涉及到图片的填充模式了。

2. fit 属性

点击 Image 的 fit 属性进入源码可以看到如下:

1/// How to inscribe the image into the space allocated during layout. 2/// 3/// The default varies based on the other fields. See the discussion at 4/// [paintImage]. 5final BoxFit fit; 6复制代码 7

我们再点一下 BoxFit,可以看到如下:

1/// How a box should be inscribed into another box. 2/// 3/// See also [applyBoxFit], which applies the sizing semantics of these values 4/// (though not the alignment semantics). 5enum BoxFit { 6 /// Fill the target box by distorting the source's aspect ratio. 7 /// 8 /// ![](https://flutter.github.io/assets-for-api-docs/assets/painting/box_fit_fill.png) 9 fill, 10 11 /// As large as possible while still containing the source entirely within the 12 /// target box. 13 /// 14 /// ![](https://flutter.github.io/assets-for-api-docs/assets/painting/box_fit_contain.png) 15 contain, 16 17 /// As small as possible while still covering the entire target box. 18 /// 19 /// ![](https://flutter.github.io/assets-for-api-docs/assets/painting/box_fit_cover.png) 20 cover, 21 22 /// Make sure the full width of the source is shown, regardless of 23 /// whether this means the source overflows the target box vertically. 24 /// 25 /// ![](https://flutter.github.io/assets-for-api-docs/assets/painting/box_fit_fitWidth.png) 26 fitWidth, 27 28 /// Make sure the full height of the source is shown, regardless of 29 /// whether this means the source overflows the target box horizontally. 30 /// 31 /// ![](https://flutter.github.io/assets-for-api-docs/assets/painting/box_fit_fitHeight.png) 32 fitHeight, 33 34 /// Align the source within the target box (by default, centering) and discard 35 /// any portions of the source that lie outside the box. 36 /// 37 /// The source image is not resized. 38 /// 39 /// ![](https://flutter.github.io/assets-for-api-docs/assets/painting/box_fit_none.png) 40 none, 41 42 /// Align the source within the target box (by default, centering) and, if 43 /// necessary, scale the source down to ensure that the source fits within the 44 /// box. 45 /// 46 /// This is the same as `contain` if that would shrink the image, otherwise it 47 /// is the same as `none`. 48 /// 49 /// ![](https://flutter.github.io/assets-for-api-docs/assets/painting/box_fit_scaleDown.png) 50 scaleDown, 51} 52复制代码 53

相信大家看到源码的注释应该很清楚每个值的意义了。

如果你还不清楚,可以点击注释里面对应的链接去查看示意图。

比如以我们这个实际应用场景填充宽度为例,那么我们可以看到 fitWidth 应该是符合我们要求的,我们点击注释的链接,跳转可以看到图片如下:

很形象的做了几种情况的示意。我们设置了 Image 的 fit 属性如下:

1child: Image.asset('assets/images/example.jpeg', width: double.infinity, fit: BoxFit.fitWidth,), 2复制代码 3

效果:

可以看到已经满足我们的需求了。

温馨提示:测试完之后不要忘记去掉测试的 Container 以及对应颜色哦~

3. print

我们知道在 Android 里面,当我们 try catch 之后,我们打印异常基本会写出类似下面代码:

1Log.e(TAG, "exception="+e); 2复制代码 3

在 Flutter 也有异常捕获。

你可能会习惯的写出如下代码:

1print('exception='+e); 2复制代码 3

但是切记,不要使用上面的写法。

因为当 e 为 null 时,上面的 print 不会执行打印。

这可能会误导你。因为你在成功的时候加上打印语句,异常捕获也加上打印语句。但是程序就是没有打印。你就会觉得很奇怪。

实际上当 e 为 null 时,print 语句会报错,+ 号连接的左右不能是 null,所以不会正常打印。因此请避免上面的写法。可以用下面的替换写法:

1//替换写法一 2print('exception='); 3print(e); 4//替换写法二 5print('exception='+(e ?? '')); 6//替换写法三 7var printContent = e ?? ''; 8print('exception='+printContent); 9复制代码 10

4. GestureDetector

我们知道如果要给一个 Widget 增加点击事件,最简单的方法就是套一层 GestureDetector。

但是有时候你这样做了,却发现有些“隐患”,或者说,有些你意料不到的事情。

这里用一个场景来告诉你,你平时可能没有发现的细节。

微博里面有点赞这个小组件,我们写下如下代码:

1import 'package:flutter/material.dart'; 2 3void main() => runApp(MyApp()); 4 5class MyApp extends StatelessWidget { 6 @override 7 Widget build(BuildContext context) { 8 return MaterialApp( 9 home: Scaffold( 10 appBar: AppBar( 11 title: Text('My Flutter'), 12 ), 13 body: Row( 14 children: <Widget>[ 15 Image.asset('assets/images/2.0x/like.png', width: 20, height: 20,), 16 SizedBox(width: 5,), 17 Text('30') 18 ], 19 ), 20 )); 21 } 22} 23复制代码 24

效果如下:

假设我们要求给这个点赞组件加上点击事件,那么我们直接给 Row 套上 GestureDetector Widget。

1import 'package:flutter/material.dart'; 2 3void main() => runApp(MyApp()); 4 5class MyApp extends StatelessWidget { 6 @override 7 Widget build(BuildContext context) { 8 return MaterialApp( 9 home: Scaffold( 10 appBar: AppBar( 11 title: Text('My Flutter'), 12 ), 13 body: GestureDetector( 14 onTap: (){ 15 print('onTap'); 16 }, 17 child: Row( 18 children: <Widget>[ 19 Image.asset('assets/images/2.0x/like.png', width: 20, height: 20,), 20 SizedBox(width: 5,), 21 Text('30') 22 ], 23 ), 24 ), 25 )); 26 } 27} 28复制代码 29

点击点赞组件确实会打印 onTap,但是如果你点击了点赞图标和数字中间的白色区域,你会发现点击事件没有回调,没有打印。

这个时候有两种解决方法:

1. 给空白组件设置 color 属性,颜色值设置透明

对于 Container 设置的 padding 可以直接设置,对于我们这里例子的 SizeBox 需要改为如下:

1SizedBox(width: 15, child: Container(color: Colors.transparent,),), 2复制代码 3

为了方便测试,这边将宽度改为 15。

所以对于设置 GestureDetector 的 Container,如果没有设置 color 属性,那么点击空白不会回调。

2. 设置 GestureDetector 的 behavior 属性(推荐方式)

其实如果你需要空白区域也响应点击,只需要设置一下 GestureDetector 的 behavior 属性即可。

behavior 默认值为 HitTestBehavior.deferToChild,我们这里将其设置为 HitTestBehavior.translucent

代码如下:

1import 'package:flutter/material.dart'; 2 3void main() => runApp(MyApp()); 4 5class MyApp extends StatelessWidget { 6 @override 7 Widget build(BuildContext context) { 8 return MaterialApp( 9 home: Scaffold( 10 appBar: AppBar( 11 title: Text('My Flutter'), 12 ), 13 body: GestureDetector( 14 behavior: HitTestBehavior.translucent, 15 onTap: (){ 16 print('onTap'); 17 }, 18 child: Row( 19 crossAxisAlignment: CrossAxisAlignment.start, 20 children: <Widget>[ 21 Image.asset('assets/images/2.0x/like.png', width: 20, height: 20,), 22 SizedBox(width: 15), 23 Text('30') 24 ], 25 ), 26 ), 27 )); 28 } 29} 30复制代码 31

这里的点赞图片我直接从网上获取的,你测试可以用随便一张图片代替验证。或者用两个文本来验证也是可以的。

转载于:https://juejin.im/post/5cce4730f265da035378ee66

代码交流 2021