Flutter：如何在具有背景影像和安全區域的腳手架上開發小部件？

我想開發的螢屏

我是 Flutter 的新手基本上，我想將這些影像添加到像框這樣的頂部背景上，有什么方法可以做到這一點，并且螢屏在多個設備上回應，這是我開始做的，但似乎很復雜我

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage("assets/images/background.png"),
                fit: BoxFit.cover,
                colorFilter: ColorFilter.mode(
                    Colors.black.withOpacity(0.75), BlendMode.darken),
              ),
            ),
          ),
          SafeArea(
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  child: Image.asset(
                    "assets/images/72.png",
                    fit: BoxFit.cover,
                  ),
                ),
              ],
            ),
          ),

        ],
      ),
    );
  }
}

uj5u.com熱心網友回復：

這是您如何在設計中實作的想法：

對于盒子，您需要使用flutter_staggered_grid_view

StaggeredGridView.countBuilder(
  crossAxisCount: 4,
  itemCount: 8,
  itemBuilder: (BuildContext context, int index) => new Container(
      color: Colors.green,
      child: new Center(
        child: new CircleAvatar(
          backgroundColor: Colors.white,
          child: new Text('$index'),
        ),
      )),
  staggeredTileBuilder: (int index) =>
      new StaggeredTile.count(2, index.isEven ? 2 : 1),
  mainAxisSpacing: 4.0,
  crossAxisSpacing: 4.0,
)

您的結構可以是：

      Scaffold
        SafeArea
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage("assets/images/background.png"),
                fit: BoxFit.cover,
                colorFilter: ColorFilter.mode(
                    Colors.black.withOpacity(0.75), BlendMode.darken),
              ),
            ),
            child: StaggeredGridView
          ),

uj5u.com熱心網友回復：

嘗試這個 ：

• 堆
  • 腳手架
    • 身體
      • 交錯網格視圖
      • 自定義底部導航欄
  • 圖片

包裹你的ScaffoldInside 堆疊，為什么？因為默認情況下Scaffold使用SafeArea，而你并不需要為背景安全區，你只需要SafeArea為AppBar，Menu以及CustomButtomNav只（指照片）

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Stack(
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage("assets/images/background.png"),
                fit: BoxFit.cover,
                colorFilter: ColorFilter.mode(
                    Colors.black.withOpacity(0.75), BlendMode.darken,
                ),
              ),
            ),
          ),
          Scaffold(
          body: Column(
            children:[
              StaggeredGridView(
              /// Put your staggered view here
              ),
              CustomBottomNav(
              /// Put your custom bottom here
              ),
            ]
          )
        ),
      ],
    );
  }
}

我不會深入研究交錯和自定義底部導航，順便說一句，這是一些建議。有一個設計 UI 和 UX 指南，我強烈建議您遵循這些指南，這樣您就不必在 Flutter 中開發 UI 組件時進行一些研究和測驗，除非您有龐大的團隊。在這里檢查：（https://material.io/develop/flutter）

標籤：扑 响应式设计 颤振布局

上一篇：在頁面視圖中顫動串列視圖

下一篇：如何將螢屏底部的行與頂部的其他容器對齊