flutter 水平列表视图不起作用

Question

i hope I can make my point clear..

This is my code in the HomePage, where I want to show the HorizontalListView.

body: ListView(
    children: [
      imageCarousel,
      const Padding(
        padding: EdgeInsets.all(8.0),
        child: Text("CATEGORIES"),
      ),
       const HorizontalListView(),

that is how I put the code in the homepage, while runing the codes on the HorizontalListView the emulator only shows a white screen which means the codes are not working. in-order to look at the issue, here is the codes of HorizontalListView page.

Container(
          height: 100,
          child: ListView(
            scrollDirection: Axis.horizontal,
            children: const [
              Category(
                image_location: 'assets/images/c2.png',
                image_caption: 'Drinks',
              ),
              Category(
                image_location: 'assets/images/c3.png', image_caption: 'Tea',
              ),
              Category(
                image_location: 'assets/images/c4.png', image_caption: 'Vgetable',
              ),
    class Category extends StatelessWidget {
      final String image_location;
      final String image_caption;
    
      const Category({required this.image_caption, required this.image_location});
      @override
      Widget build(BuildContext context) {
        return Padding(
          padding:const EdgeInsets.all(2.0),
        child: InkWell(
          onTap: (){},
        child: Container(
          height: 100,
          child: ListTile(
            title: Image.asset(image_location,
            width: 100,
              height: 80,
            ),
          subtitle: Container(
          alignment: Alignment.topCenter,
          child:Text(image_caption, style: const TextStyle(fontWeight: FontWeight.bold)),
          ),

      

and please don't worry much about the brackets i just delete some because the rules of the site.

I'll appreciate any HELP. Thanks.

Answer 1

Actually i cannot read your trouble in your code, because some code in your post is missing, like which widget wrap your container listview . But here i have some suggestion for you and you can try it:

wrap your container list view with row.

I have solved my problem with it in few days ago

Answer 2

I check your code it creates an issue I wrap the widget into singlechildscrollView as a parent widget and call our list into a row widget. You can try out this solution it works for my side thanks
      
    import 'package:flutter/material.dart';  
        class FirstScreen extends StatefulWidget {
          const FirstScreen({Key? key}) : super(key: key);
        
          @override
          State<FirstScreen> createState() => _FirstScreenState();
        }
        
        class _FirstScreenState extends State<FirstScreen> {
          @override
          Widget build(BuildContext context) {
            return Scaffold(
              body:SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: Row(
              children: const [
              Category(
              image_location: 'assets/MasterCard.png',
              image_caption: 'Drinks',
            ),
            Category(
            image_location: 'assets/Traveling.png', image_caption: 'Tea',
            ),
            Category(
            image_location: 'assets/Visa.png', image_caption: 'Vgetable',
            ),
            ])));
          }
        }
        
        class Category extends StatelessWidget {
          final String image_location;
          final String image_caption;
        
          const Category({required this.image_caption, required this.image_location});
          @override
          Widget build(BuildContext context) {
            return Padding(
                padding:const EdgeInsets.all(2.0),
                child: InkWell(
                onTap: (){},
            child: Container(
            height: 100,
            width: 300,
            child: ListTile(
            title: Image.asset(image_location,
            width: 100,
            height: 80,
            ),
            subtitle: Container(
            alignment: Alignment.topCenter,
            child:Text(image_caption, style: const TextStyle(fontWeight: FontWeight.bold)),
            ),
            )
            )
                )
            );
          }
        }