如何调整图像宽度并隐藏颤动中的垂直溢出

Question

我正在尝试将一个简单的模板放在一起作为学习练习。我希望图像宽度左右占据屏幕，高度被裁剪为 200px，隐藏多余的内容。

代码：

Image _buildJournalHeaderImage(context) {
    return Image.network(
      "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Salto_del_Angel-Canaima-Venezuela08.JPG/1200px-Salto_del_Angel-Canaima-Venezuela08.JPG",
      // fit: BoxFit.cover,
      fit: BoxFit.fitWidth,
      height: MediaQuery.of(context).size.width / 2,
    );
  }

此方法作为子列放置。

Answer 1

这样创建

   Container(
                height: 200,
                child: Row(
                  children: [
                    Expanded(
                      child: Image.network(
                        "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Salto_del_Angel-Canaima-Venezuela08.JPG/1200px-Salto_del_Angel-Canaima-Venezuela08.JPG",
                        // fit: BoxFit.cover,
                        fit: BoxFit.fitWidth,
                      ),
                    ),
                  ],
                ),
              )

示例代码 dartpad livecode

    import 'package:flutter/material.dart';



Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  runApp(MyApp());
}


class MyApp extends StatefulWidget {
  MyApp({Key? key, this.title}) : super(key: key);
  final String? title;

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {


  @override
  void initState() {
    super.initState();
 
  }


  @override
  Widget build(BuildContext context) {
 
    var column = Column(
            children: [
              Container(
                height: 200,
                child: Row(
                  children: [
                    Expanded(
                      child: Image.network(
                        "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Salto_del_Angel-Canaima-Venezuela08.JPG/1200px-Salto_del_Angel-Canaima-Venezuela08.JPG",
                        // fit: BoxFit.cover,
                        fit: BoxFit.fitWidth,
                      ),
                    ),
                  ],
                ),
              )
            ],
          );
    return MaterialApp(
      // theme: theme(),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
          appBar: AppBar(),
          body:               Container(
            height: 200,
            child: Row(
              children: [
                Expanded(
                  child: Image.network(
                    "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Salto_del_Angel-Canaima-Venezuela08.JPG/1200px-Salto_del_Angel-Canaima-Venezuela08.JPG",
                    // fit: BoxFit.cover,
                    fit: BoxFit.fitWidth,
                  ),
                ),
              ],
            ),
          )
      ),
    );
  }
}

Answer 2

您不需要比这更复杂的东西来让图像填充宽度并使 fixed-height 为 200:

import 'package:flutter/material.dart';

class FitToWidthExample extends StatelessWidget {
  const FitToWidthExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.max,
      children: [
          Image.network(
            "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Salto_del_Angel-Canaima-Venezuela08.JPG/1200px-Salto_del_Angel-Canaima-Venezuela08.JPG",
            fit: BoxFit.fitWidth,
            alignment: Alignment.center, // If you don't want the image center aligned modify this.
            width: MediaQuery.of(context).size.width,
            height: 200,
          )
      ]
    );
  }
}

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) => const MaterialApp(
      home: Scaffold(body: FitToWidthExample()),
  );
}

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

如何调整图像宽度并隐藏颤动中的垂直溢出

How to adjust image to width and hide vertical overflow in flutter

flutter

flutter-image