将 scrollDirection 设置为 Axis.horizo​​ntal 时 ListView.builder 引发 RedorBox 错误

Question

我正在使用ListView.builder 和Gridview.builder 并且需要使ListView 水平但是当我设置它的scrollDirection 属性时它会抛出错误（附图） [![在此处输入图片描述][1]][1]

import 'package:flutter/material.dart';

class MenuPage extends StatefulWidget {
  @override
  _MenuPageState createState() => _MenuPageState();
}

class _MenuPageState extends State<MenuPage> {
  List<String> litems = ["Hello", "how"];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        physics: ScrollPhysics(),
        child: Column(
          children: <Widget>[
            ListView.builder(
                scrollDirection: Axis.horizontal,
                physics: NeverScrollableScrollPhysics(),
                shrinkWrap: true,
                padding: EdgeInsets.all(8),
                itemCount: 18,
                itemBuilder: (context, index) {
                  return CategoryButton(title: "title");
                }),
            GridView.builder(
                gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                    maxCrossAxisExtent: 200,
                    childAspectRatio: 3 / 2,
                    crossAxisSpacing: 20,
                    mainAxisSpacing: 20),
                physics: NeverScrollableScrollPhysics(),
                shrinkWrap: true,
                itemCount: 18,
                itemBuilder: (context, index) {
                  return Text('Some text more');
                })
          ],
        ),
      ),
    );
  }
}


  [1]: https://i.stack.imgur.com/D2knH.png

Answer 1

您已将ListView.builder 直接用于列小部件。 Column 及其父 SingleChildScrollView 小部件具有无限的高度和宽度。您应该为 ListView.builder 小部件设置宽度和高度，或者在 Expanded 小部件内设置扭曲。我通过设置高度和小部件解决了它。找到下面的代码。

class MenuPage extends StatefulWidget {
  @override
  _MenuPageState createState() => _MenuPageState();
}

class _MenuPageState extends State<MenuPage> {
  final List<String> litems = ["Hello", "how"];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: SingleChildScrollView(
        physics: ScrollPhysics(),
        child: Column(
          children: <Widget>[_buildListView(), _buildGridView()],
        ),
      ),
    );
  }

  GridView _buildGridView() {
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
          maxCrossAxisExtent: 200,
          childAspectRatio: 3 / 2,
          crossAxisSpacing: 20,
          mainAxisSpacing: 20),
      physics: NeverScrollableScrollPhysics(),
      shrinkWrap: true,
      itemCount: 18,
      itemBuilder: (context, index) {
        return Text('Some text more');
      },
    );
  }

  Widget _buildListView() {
    final deviceWidth = MediaQuery.of(context).size.width;
    return Container(
      width: deviceWidth,
      height: 150.0,
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        physics: NeverScrollableScrollPhysics(),
        shrinkWrap: true,
        padding: EdgeInsets.all(8),
        itemCount: 18,
        itemBuilder: (context, index) {
          return Container(
            width: 100,
            height: 100,
            child: TextButton(
              onPressed: () {},
              child: Text("title"),
            ),
          );
        },
      ),
    );
  }
}