將具有自定義形狀的 Flutter 小部件完美地放置在另一個小部件中

Question

我想顯示智能手機的框架（SVG 圖像）並在其中顯示不應 go 超出智能手機框架的任何小部件。

在上圖中，我在Stack中有框架，在ListView頂部有Cards作為子小部件。 框架必須位於子小部件下方才能使手勢起作用。 ListView的寬度受到硬編碼寬度的SizedBox的限制，但它沒有響應。 在稍小的屏幕上， ListView超出了框架（如圖所示）。 即使屏幕尺寸發生變化，如何確保子小部件始終留在框架中。

我也嘗試過使用ClipPath ，但我無法將它完美地放入框架中。 但我認為ClipPath是必需的，因為我想在框架中放置其他子小部件，例如應該覆蓋框架中所有空間的視頻。

Answer 1

要使小部件具有響應性，您可以使用MediaQuery.of(context).size.width以像素為單位獲取屏幕寬度，例如，如果乘以 0.7，它將占據屏幕的 70%。

//square widget 1:1
SizedBox(
  child: SvgPicture.asset('lib/your.svg'),
  width: MediaQuery.of(context).size.width * 0.7,
  height: MediaQuery.of(context).size.width * 0.7,
),