flutter - 具有 fitHeight 的 FittedBox 渲染图像宽度的其余部分

Question

在下面的示例中，FittedBox 执行了我想要的操作:它将高度适合容器。但是，它应该隐藏图像的其余部分。但是，它会呈现它。

出了什么问题？

/// Flutter code sample for Expanded

// This example shows how to use an [Expanded] widget in a [Column] so that
// its middle child, a [Container] here, expands to fill the space.
//
// ![This results in two thin blue boxes with a larger amber box in between.](https://flutter.github.io/assets-for-api-docs/assets/widgets/expanded_column.png)

import 'package:flutter/material.dart';

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

/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatelessWidget(),
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Expanded Column Sample'),
      ),
      body: Center(
        child: Container(
          width: 100,
          child: Column(
          children: <Widget>[
            Container(
              color: Colors.blue,
              height: 100,
              width: 100,
            ),
            Expanded(
              child: Container(
                color: Colors.amber,
                child: FittedBox(
                  fit: BoxFit.fitHeight,
                  child: Image.network(
                    'https://i.ytimg.com/vi/E5fD0SSqPa0/maxresdefault.jpg'))
              ),
            ),
            Container(
              color: Colors.blue,
              height: 100,
              width: 100,
            ),
          ],
        )),
      ),
    );
  }
}

根据https://api.flutter.dev/flutter/widgets/FittedBox-class.html ，它应该适合高度但忽略图像的其余部分

Answer 1

您可以删除 FittedBox 并将 fit 属性直接设置为图像的 BoxFit.cover 值。

return Scaffold(
      appBar: AppBar(
        title: const Text('Expanded Column Sample'),
      ),
      body: Center(
        child: Container(
            width: 100,
            child: Column(
              children: <Widget>[
                Container(
                  color: Colors.blue,
                  height: 100,
                  width: 100,
                ),
                Expanded(
                  child: Container(
                      color: Colors.amber,
                      child: Image.network(
                        'https://i.ytimg.com/vi/E5fD0SSqPa0/maxresdefault.jpg',
                        fit: BoxFit.cover,
                      )),
                ),
                Container(
                  color: Colors.blue,
                  height: 100,
                  width: 100,
                ),
              ],
            )),
      ),
    );