flutter图片点击跳转_Flutter 你需要知道的那些事 01

公众号「AndroidTraveler」首发。

1. width 属性

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

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

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

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

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

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

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

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text('My Flutter'),
          ),
          body: Center(
            child: Image.asset('assets/images/example.jpeg'),
          ),
        )
    );
  }
}

效果：

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

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

child: Image.asset('assets/images/example.jpeg', width: double.infinity,),

效果

什么情况，没起作用？

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

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

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

代码如下：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());