listview.builder 不适用于 scrollDirection：Axis.horizo​​ntal

Question

这是我的 HomePage.dart，我试图在其中水平显示产品列表，但是当我设置 scrollDirection: Axis.horizo​​ntal 时整个屏幕变白，我在一些详细信息页面中使用了 hero 小部件，这就是我创建的原因小部件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 或 GridView insdie a Row 或 Column 会出现此错误。修复方法是提供固定宽度或将其包裹在 Expanded 小部件下。

查看此链接了解更多信息： https://stackoverflow.com/a/57132247/3197387

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