flutter - Image BoxFit.cover 未正确应用

Question

我正在尝试使用以下代码用 4 个相等大小的图像（2x2）填充整个屏幕：

import 'package:flutter/material.dart';

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

class _MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            Expanded(
              child: Row(
                children: [
                  Expanded(
                    child: Image.network(
                      'https://static01.nyt.com/images/2020/06/30/business/30india-tech-1/30india-tech-1-articleLarge.jpg?quality=75&auto=webp&disable=upscale',
                      fit: BoxFit.cover,
                    ),
                  ),
                  Expanded(
                    child: Image.network(
                      'https://static01.nyt.com/images/2020/06/30/business/30india-tech-1/30india-tech-1-articleLarge.jpg?quality=75&auto=webp&disable=upscale',
                      fit: BoxFit.cover,
                    ),
                  ),
                ],
              ),
            ),
            Expanded(
              child: Row(
                children: [
                  Expanded(
                    child: Image.network(
                      'https://static01.nyt.com/images/2020/06/30/business/30india-tech-1/30india-tech-1-articleLarge.jpg?quality=75&auto=webp&disable=upscale',
                      fit: BoxFit.cover,
                    ),
                  ),
                  Expanded(
                    child: Image.network(
                      'https://static01.nyt.com/images/2020/06/30/business/30india-tech-1/30india-tech-1-articleLarge.jpg?quality=75&auto=webp&disable=upscale',
                      fit: BoxFit.cover,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

然而，结果是这样的：

我正在寻找的结果：

我怎样才能修复我的代码来做到这一点？所以每个图像的大小都与其他图像相同，并且查看为 2X2

标签： flutter

Answer 1

您可以应用每个图像height: double.infinity以使图像具有尽可能多的高度：

import 'package:flutter/material.dart';

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

class _MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            Expanded(
              child: Row(
                children: [
                  Expanded(
                    child: Image.network(
                      'https://static01.nyt.com/images/2020/06/30/business/30india-tech-1/30india-tech-1-articleLarge.jpg?quality=75&auto=webp&disable=upscale',
                      fit: BoxFit.cover,
                      height: double.infinity,
                    ),
                  ),
                  Expanded(
                    child: Image.network(
                      'https://static01.nyt.com/images/2020/06/30/business/30india-tech-1/30india-tech-1-articleLarge.jpg?quality=75&auto=webp&disable=upscale',
                      fit: BoxFit.cover,
                      height: double.infinity,
                    ),
                  ),
                ],
              ),
            ),
            Expanded(
              child: Row(
                children: [
                  Expanded(
                    child: Image.network(
                      'https://static01.nyt.com/images/2020/06/30/business/30india-tech-1/30india-tech-1-articleLarge.jpg?quality=75&auto=webp&disable=upscale',
                      fit: BoxFit.cover,
                      height: double.infinity,
                    ),
                  ),
                  Expanded(
                    child: Image.network(
                      'https://static01.nyt.com/images/2020/06/30/business/30india-tech-1/30india-tech-1-articleLarge.jpg?quality=75&auto=webp&disable=upscale',
                      fit: BoxFit.cover,
                      height: double.infinity,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}