listview.builder 不适用于 scrollDirection：Axis.horizontal

Question

这是我的 HomePage.dart，我在其中尝试水平显示产品列表，但是当我设置 scrollDirection: Axis.horizontal 时整个屏幕变白，我在一些详细信息页面中使用了英雄小部件这就是我创建小部件 buidItem 的原因。请帮帮我，我对此深陷其中，我也尝试过 signleChildScrollView，但那也没有用。

import 'package:EcommerceApp/animations/fadeAnimations.dart';
import 'package:EcommerceApp/screens/info_page.dart';
import 'package:flutter/material.dart';

class MyHomePage extends StatelessWidget {
  final List<Map<String, String>> dataList = [
    {"imageLink": "images/1.jpg", "tag": "one", "name": "product1"},
    {"imageLink": "images/2.jpg", "tag": "two", "name": "product2"},
    {"imageLink": "images/3.jpg", "tag": "three", "name": "product3"},
    {"imageLink": "images/4.jpg", "tag": "four", "name": "product4"},
    {"imageLink": "images/bensen.jpg", "tag": "five", "name": "product5"},
    {"imageLink": "images/marl.jpg", "tag": "six", "name": "product6"},
    {"imageLink": "images/fs.jpg", "tag": "seven", "name": "product7"},
    {"imageLink": "images/marl.jpg", "tag": "eight", "name": "product8"},
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0,
        title: Text(
          "Home Page",
          style: TextStyle(color: Colors.black, fontSize: 25),
        ),
      ),
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
                 scrollDirection: Axis.horizontal, // this scrollDirection is throwing error but when I remove this It works just fine
                padding: EdgeInsets.symmetric(horizontal: 10),
                itemCount: dataList.length,
                itemBuilder: (context, index) {
                  return buidItem(
                      image: dataList[index]['imageLink'],
                      tag: dataList[index]['tag'],
                      name: dataList[index]['name'],
                      context: context);
                }),
          ),
        ],
      ),
      // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

  Widget buidItem(
      {String image = "images/",
      @required String tag,
      @required String name,
      @required BuildContext context}) {
    return Material(
        child: Hero(
            tag: tag,
            child: GestureDetector(
              onTap: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => InfoPage(
                              image: image,
                              tag: tag,
                              name: name,
                            )));
              },
              child: Container(
                height: 100,
                width: double.infinity,
                decoration: BoxDecoration(
                  image: DecorationImage(
                      fit: BoxFit.cover, image: AssetImage(image)),
                ),
              ),
            )));
  }
}

Answer 1

将您的 ListView.Builder() 包裹在 Expanded 小部件中。每当您有一个不断增长的小部件时，例如ListView or GridView insdie a Row or Column 就会出现这个错误。解决方法是提供固定宽度或将其包装在 Expanded 小部件下。

查看此 link 了解更多信息：

Answer 2

这对我有用，从 Vertical ListView inside horizontal SingleChildScrollView

得到的

SingleChildScrollView(
  child: Column(
    mainAxisSize: MainAxisSize.min,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      SizedBox(
        height: 120, // <-- you should put some value here
        child: ListView.builder(
          scrollDirection: Axis.horizontal,
          itemCount: items.length,
          itemBuilder: (context, index) {
            return Text('it works');
          },
        ),
      ),
    ],
  ),
);

Answer 3

你这样试试

ListView.builder(
  shrinkWrap: true,
  physics: NeverScrollableScrollPhysics(),
  scrollDirection: Axis.horizontal,
  padding: EdgeInsets.symmetric(horizontal: 10),
  itemCount: dataList.length,
  itemBuilder: (context, index) {
    return buidItem(
        image: dataList[index]['imageLink'],
        tag: dataList[index]['tag'],
        name: dataList[index]['name'],
        context: context);
  }),

listview.builder 不适用于 scrollDirection：Axis.horizontal

listview.builder doesnt works with scrollDirection: Axis.horizontal

flutter

flutter-layout

flutter-web