Flutter:如何在脚手架上开发具有背景图像和安全区域的小部件

Question

我想开发的屏幕

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

Answer 1

这是一个如何在设计中实现的想法：

对于这些盒子，您需要使用flatter_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
),

Answer 2

试试这个：

• 堆栈
  • 脚手架
    • 身体
      • 交错网格视图
      • 自定义底部导航栏
  • 图像

将Scaffold包裹在堆栈内，为什么？因为默认情况下Scaffold使用安全区域，并且背景不需要安全区域，所以只需要AppBar、Menu和CustomButtomNav的SafeArea(参考图片(

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&用户体验指南，我强烈建议你遵循这些指南，这样你就不必在flutter中开发UI组件时对其进行一些研究和测试，除非你有一个庞大的团队。请在此处查看：(https://material.io/develop/flutter)