如何將影像調整為寬度并隱藏顫動中的垂直溢位

我正在嘗試將一個簡單的模板放在一起作為學習練習。我希望影像寬度左右占據螢屏，并將高度裁剪為 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,
    );
  }

此方法被放置為列子項。

uj5u.com熱心網友回復：

您不需要比這更復雜的東西來讓影像填充寬度并具有 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());

uj5u.com熱心網友回復：

像這樣創建

   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,
                      ),
                    ),
                  ],
                ),
              )

SampleCode 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,
                  ),
                ),
              ],
            ),
          )
      ),
    );
  }
}

標籤：扑 颤动图像

上一篇：比較兩個串列時出現FlutterRangeError

下一篇：如何從TcpConnectionFactory重新打開SpringSocket？