flutter 如何把一个boxdecoration的水平列表视图放到另一个boxdecoration下面?

ffx8fchx  于 2023-01-09  发布在  Flutter
关注(0)|答案(1)|浏览(165)

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

我希望你们能帮助我非常感谢

tcomlyy6

tcomlyy61#

水平列表视图可以通过ListView.builder小部件创建。默认情况下,此列表的滚动方向是垂直的,因此您必须将其更改为水平:-

scrollDirection: Axis.horizontal,

产品代码:

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ListView',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: const View(),
    );
  }
}

class View extends StatefulWidget {
  const View({super.key});

  @override
  State<View> createState() => _ViewState();
}

class _ViewState extends State<View> {
  List doctorName = ["A", "B", "C"];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: const Color.fromARGB(255, 236, 230, 230),
        body: Padding(
          padding: const EdgeInsets.only(top: 550),
          child: SizedBox(
            height: 240,
            child: ListView.builder(
                scrollDirection: Axis.horizontal,
                itemCount: doctorName.length,
                itemBuilder: ((context, index) {
                  return (Container(
                    margin: EdgeInsets.only(
                        top: 15,
                        bottom: 15,
                        left: 25,
                        right: index == 2 ? 25 : 0),
                    padding: const EdgeInsets.only(left: 15, right: 15),
                    width: 360,
                    decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius:
                            const BorderRadius.all(Radius.circular(20.0)),
                        boxShadow: <BoxShadow>[
                          BoxShadow(
                              color: Colors.black.withOpacity(0.3),
                              blurRadius: 5.0,
                              spreadRadius: 2.0,
                              offset: const Offset(0.0, 6.0)),
                        ]),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Row(
                          children: [
                            const CircleAvatar(
                              radius: 45.0,
                              child: Icon(
                                Icons.person,
                                size: 45,
                              ),
                            ),
                            const SizedBox(
                              width: 20,
                            ),
                            Column(
                              children: [
                                const SizedBox(
                                  height: 40,
                                ),
                                Text(
                                  doctorName[index],
                                  style: const TextStyle(
                                      fontSize: 22,
                                      fontWeight: FontWeight.w700),
                                ),
                                const SizedBox(
                                  height: 10,
                                ),
                                const Text(
                                  'Text 1',
                                  style: TextStyle(
                                    fontSize: 18,
                                  ),
                                ),
                                const Text(
                                  'Text 2',
                                  style: TextStyle(
                                    fontSize: 18,
                                  ),
                                ),
                                const SizedBox(
                                  height: 10,
                                ),
                              ],
                            )
                          ],
                        ),
                        const Divider(
                          color: Colors.black,
                          thickness: 1.0,
                        ),
                        const SizedBox(
                          height: 10,
                        ),
                        const Text(
                          'Body ...',
                          style: TextStyle(
                              fontSize: 20, fontWeight: FontWeight.w400),
                        ),
                      ],
                    ),
                  ));
                })),
          ),
        ));
  }
}

输出:-

相关问题