在 flutter 中連續顯示寬高比項目和圖像

Question

假設我想創建一個Flutter應用程序。 在我的應用程序中，我想創建一個包含以下子項的Row小部件：

• AspectRatio(aspectRatio: 1, child: Center(child: Text("I am text!"))
• Image.asset("path/to/asset.png")

我想顯示該Row ，同時保持兩個縱橫比不變。 我怎樣才能做到這一點？

這是我的嘗試：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("This is my app")),
      body: Container(
        child: Row(children: [buildItem1(), buildItem2()]),
      ),
    );
  }

  Widget buildItem1() {
    return AspectRatio(
        aspectRatio: 1,
        child: Container(
            color: Colors.red, child: Center(child: Text("This is my text"))));
  }

  Widget buildItem2() {
    return Image.asset("path/to/my/asset.jpg");
  }
}

這就是顯示的內容：

我正在嘗試找出一種自動縮小行高的方法，以便兩個項目都適合屏幕。

如果我使用這樣的固定高度：

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("This is my app")),
      body: Container(
        height: 300,
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [buildItem1(), buildItem2()],
        ),
      ),
    );
  }
...

比我得到以下信息：

哪個更好，但我想填滿屏幕的整個寬度。

感謝任何可以提供幫助的人！

Answer 1

您可以在第二個小部件上使用Expanded ，這將在行上獲得可用空間。 同樣對於圖像使用fit: BoxFit.cover （比width更好看）。

body: Container(
  height: 300,
  child: Row(
    children: [buildItem1(), Expanded(child: buildItem2())],
  ),
),

  Widget buildItem2() {
    return Image.asset(
      "assets/images/user.png",
      fit: BoxFit.cover,
    );
  }

---

現在如果你想要全屏，我會更喜歡

Row(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    Expanded(
      child: Container(
          color: Colors.red,
          child: Center(
            child: Text("This is my text"),
          )),
    ),
    Expanded(
        child: Image.asset(
      "assets/images/user.png",
      fit: BoxFit.cover,
    )),
  ],
),

腳手架body上的 LayoutBuilder 也提供了更多選項。 還要檢查IntrinsicHeight 。