我是 StackOverflow 和 flutter 的新手，正在尝试编写一个移动应用程序。也许这是一个简单的问题，但我不知道该怎么做。我尝试了很多次只是为了显示覆盖图像，但没有出现图像。
我的目标是 3 个图标，它也可以在它们下面显示为三个单独的图像。
我真的需要帮助，请。
[@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
backgroundColor: ColorConstant.whiteA700,
body: Container(
width: size.width,
child: SingleChildScrollView(
child: Container(
height: size.height,
width: size.width,
decoration:
BoxDecoration(color: ColorConstant.whiteA700),
child: Stack(alignment: Alignment.topCenter, children: \[
Align(
alignment: Alignment.centerLeft,
child: Image.asset(
ImageConstant.imgAchievementsbg,
height: getVerticalSize(800.00),
width: getHorizontalSize(360.00),
fit: BoxFit.fill)),
Align(
alignment: Alignment.topCenter,
child: Padding(
padding: EdgeInsets.only(
left: getHorizontalSize(18.00),
top: getVerticalSize(9.00),
right: getHorizontalSize(18.00),
bottom: getVerticalSize(10.00)),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment:
CrossAxisAlignment.end,
mainAxisAlignment:
MainAxisAlignment.start,
children: \[
GestureDetector(
onTap: () {
onTapImgBackbutton4();
},
child: Padding(
padding: EdgeInsets.only(
left: getHorizontalSize(
10.00)),
child: Image.asset(
ImageConstant
.imgBackbutton4,
height: getSize(38.00),
width: getSize(38.00),
fit: BoxFit.fill))),
Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: EdgeInsets.only(
top:
getVerticalSize(75.00)),
child: Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
crossAxisAlignment:
CrossAxisAlignment.end,
mainAxisSize:
MainAxisSize.max,
children: \[
Padding(
padding: EdgeInsets.only(
bottom:
getVerticalSize(
2.00)),
child: Column(
mainAxisSize:
MainAxisSize
.min,
crossAxisAlignment:
CrossAxisAlignment
.start,
mainAxisAlignment:
MainAxisAlignment
.start,
children: \[
Align(
alignment:
Alignment
.center,
child: Padding(
padding: EdgeInsets.only(
right: getHorizontalSize(
2.00)),
child: Text(
"msg_click_on_an_ico"
.tr,
overflow:
TextOverflow.ellipsis,
textAlign: TextAlign.center,
style: AppStyle.textstylehywenheihew15.copyWith(fontSize: getFontSize(15), height: 2.13)))),
//START OF ICONS
Container(
width: getHorizontalSize(
194.00),
margin: EdgeInsets.only(
top: getVerticalSize(
44.00)),
child: Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
crossAxisAlignment:
CrossAxisAlignment
.center,
mainAxisSize:
MainAxisSize.max,
children: \[
Image.asset(
ImageConstant.imgJavaicon,
height: getVerticalSize(98.00),
width: getHorizontalSize(78.00),
fit: BoxFit.fill),
Image.asset(
ImageConstant.imgPhpicon,
height: getVerticalSize(98.00),
width: getHorizontalSize(80.00),
fit: BoxFit.fill)
\]))
\])),
Padding(
padding: EdgeInsets.only(
top:
getVerticalSize(
76.00),
right:
getHorizontalSize(
7.00)),
child: Image.asset(
ImageConstant
.imgCppicon,
height:
getVerticalSize(
100.00),
width:
getHorizontalSize(
80.00),
fit: BoxFit.fill))
\])))
\])))
\]))))));
}
onTapImgBackbutton4() {
Get.toNamed(AppRoutes.frontPageScreen);
}
}
I also tried this Gesture Detector but the overlay image is not appearing.
class AchivementPageScreen extends GetWidget<AchivementPageController> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
backgroundColor: ColorConstant.whiteA700,
body: Container(
width: size.width,
child: SingleChildScrollView(
child: Container(
height: size.height,
width: size.width,
decoration:
BoxDecoration(color: ColorConstant.whiteA700),
child: Stack(alignment: Alignment.topCenter, children: [
Align(
alignment: Alignment.centerLeft,
child: Image.asset(
ImageConstant.imgAchievementsbg,
height: getVerticalSize(800.00),
width: getHorizontalSize(360.00),
fit: BoxFit.fill)),
Align(
alignment: Alignment.topCenter,
child: Padding(
padding: EdgeInsets.only(
left: getHorizontalSize(18.00),
top: getVerticalSize(9.00),
right: getHorizontalSize(18.00),
bottom: getVerticalSize(10.00)),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment:
CrossAxisAlignment.end,
mainAxisAlignment:
MainAxisAlignment.start,
children: [
GestureDetector(
onTap: () {
onTapImgBackbutton4();
},
child: Padding(
padding: EdgeInsets.only(
left: getHorizontalSize(
10.00)),
child: Image.asset(
ImageConstant
.imgBackbutton4,
height: getSize(38.00),
width: getSize(38.00),
fit: BoxFit.fill))),
Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: EdgeInsets.only(
top:
getVerticalSize(75.00)),
child: Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
crossAxisAlignment:
CrossAxisAlignment.end,
mainAxisSize:
MainAxisSize.max,
children: [
Padding(
padding: EdgeInsets.only(
bottom:
getVerticalSize(
2.00)),
child: Column(
mainAxisSize:
MainAxisSize
.min,
crossAxisAlignment:
CrossAxisAlignment
.start,
mainAxisAlignment:
MainAxisAlignment
.start,
children: [
Align(
alignment:
Alignment
.center,
child: Padding(
padding: EdgeInsets.only(
right: getHorizontalSize(
2.00)),
child: Text(
"msg_click_on_an_ico"
.tr,
overflow:
TextOverflow.ellipsis,
textAlign: TextAlign.center,
style: AppStyle.textstylehywenheihew15.copyWith(fontSize: getFontSize(15), height: 2.13)))),
//START OF ICONS
Align(
alignment:
Alignment
.topCenter,
child: Padding(
padding: EdgeInsets.only(left: getHorizontalSize(2.00), top: getVerticalSize(44.00), right: getHorizontalSize(28.00), bottom: getVerticalSize(225.00)),
child: Row(crossAxisAlignment: CrossAxisAlignment.center, mainAxisSize: MainAxisSize.max, children: [
GestureDetector(
onTap: () {
onTapImgJavaicon();
},
child: Image.asset(ImageConstant.imgJavaicon, height: getVerticalSize(98.00), width: getHorizontalSize(80.00), fit: BoxFit.fill)),
GestureDetector(
onTap: () {
onTapImgPhpicon();
},
child: Padding(padding: EdgeInsets.only(left: getHorizontalSize(26.00)), child: Image.asset(ImageConstant.imgPhpicon, height: getVerticalSize(98.00), width: getHorizontalSize(80.00), fit: BoxFit.fill))),
GestureDetector(
onTap: () {
onTapImgCppicon();
},
child: Padding(padding: EdgeInsets.only(left: getHorizontalSize(26.00)), child: Image.asset(ImageConstant.imgCppicon, height: getVerticalSize(98.00), width: getHorizontalSize(80.00), fit: BoxFit.fill)))
])))
]))
])))
])))
]))))));
}
onTapImgBackbutton4() {
Get.toNamed(AppRoutes.frontPageScreen);
}
}
onTapImgCppicon() {}
onTapImgPhpicon() {}
onTapImgJavaicon() {
child:
Container(
width: 200,
height: 200,
decoration: const BoxDecoration(
image: DecorationImage(
image: ExactAssetImage('assets/img_Java.jpg'), fit: BoxFit.cover)),
);
}
只需使用 Row。
Row(
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: yourImageWidget,
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: yourImageWidget,
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: yourImageWidget,
),
),
],
)
import 'package:flutter/material.dart';
import 'shop.dart';
import 'management.dart';
import 'work.dart';
import 'assetmanagement.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Background Image Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Scaffold(
body: PageView(scrollDirection: Axis.horizontal,children: <Widget>[
assetmanagement(),
verticalpageview(),
shop(),
],),
);
}
}
class verticalpageview extends StatelessWidget {
@override
Widget build(BuildContext context) {
return PageView(
scrollDirection: Axis.vertical,
children: <Widget>[
management(),
MyHomePage1(),
work()
],
);
}
}
class MyHomePage1 extends StatelessWidget {
const MyHomePage1({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/background.jpeg"),
fit: BoxFit.cover,
),),
),
Positioned(
top: 19,
left: 37,
child: GestureDetector(
onTap: () {
Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) => shop()));
},
child: Image.asset("assets/ui.jpg", width: 100,height: 100),
),),
],
),
);
}
}