Hellog的家伙们我是新来的,想为我的健康应用程序做一个主页,在一个盒子装饰下面有一个水平的列表视图。
这是我在Figma中构建UI
我想让我的主页是这样的,但不太明白如何做到这一点。
顺便说一句,这是我目前的主页到目前为止
这是我的代码
//import 'dart:js';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:get/get_navigation/get_navigation.dart';
import 'package:medreminder/NewsArticle/news_home.dart';
import 'package:medreminder/Recipe/recipe_home.dart';
import 'package:medreminder/Reminder/ui/theme.dart';
import 'package:medreminder/TipsAndTricks/screens/tips_screen.dart';
import 'Reminder/home_reminder.dart';
import 'Reminder/ui/widgets/button.dart';
import 'package:medreminder/main.dart';
import 'package:medreminder/home_page.dart';
void main() {
// debugPaintSizeEnabled = true;
runApp(const HomePage());
}
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Mr. Health App"),
backgroundColor: Color(0XFF0080FE),
),
body: Stack(
alignment: Alignment.topCenter,
children: [
Image.asset('images/MenuImg.jpg'),
Container(
height: 250,
width: 310,
margin: const EdgeInsets.only(top: 150),
padding: const EdgeInsets.only(
left: 20,
right: 20,
top: 15,
bottom: 15,
),
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(25.0)),
color: context.theme.backgroundColor,
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.1),
spreadRadius: 2,
blurRadius: 5,
offset: const Offset(0, 6),
),
],
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Column(
children: [
IconButton(
icon: Image.asset('images/reminder.png'),
iconSize: 45,
onPressed: () {
Navigator.of(context, rootNavigator: true).push(
MaterialPageRoute(builder: (context) => const ReminderHomePage()),
);
},
),
Text("Medicine\nReminder", style: normalStyle,)
],
),
Column(
children: [
IconButton(
icon: Image.asset('images/news.png'),
iconSize: 45,
onPressed: () {
Navigator.of(context, rootNavigator: true).push(
MaterialPageRoute(builder: (context) => NewsHomePage()),
);
},
),
Text(" News \n& Article", style: normalStyle)
],
),
Column(
children: [
IconButton(
icon: Image.asset('images/recipe.png'),
iconSize: 45,
onPressed: () {
Navigator.of(context, rootNavigator: true).push(
MaterialPageRoute(builder: (context) => RecipeHomePage()),
);
},
),
Text("Healty Food \n Recipe", style: normalStyle)
],
),
],
),
SizedBox(height: 10,),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Column(
children: [
IconButton(
icon: Image.asset('images/tips.png'),
iconSize: 45,
onPressed: () {
Navigator.of(context, rootNavigator: true).push(
MaterialPageRoute(builder: (context) => const TipsList()),
);
},
),
Text("Tips &\n Tricks", style: normalStyle,)
],
),
Column(
children: [
IconButton(
icon: Image.asset('images/about.png'),
iconSize: 45,
onPressed: () {
},
),
Text("About Us\n", style: normalStyle)
],
),
Column(
children: [
IconButton(
icon: Image.asset('images/recipe.png'),
iconSize: 45,
onPressed: () {},
),
Text("Healty Food \n Recipe", style: normalStyle)
],
),
],
)
],
),
),
],
));
}
}
我希望你们能帮助我非常感谢
1条答案
按热度按时间tcomlyy61#
水平列表视图可以通过ListView.builder小部件创建。默认情况下,此列表的滚动方向是垂直的,因此您必须将其更改为水平:-
产品代码:
输出:-