Question

我想在顶部使用水平滚动，在下面使用垂直滚动。当我在ListView.builder内部的水平线下方添加垂直SingleChildScrollView时，会出现vertical viewport was given unbound height错误。

进纸屏幕：如果我手动添加VerticalFeedItem，则正常工作。但是，显然这是小部件的未定义长度，因此ListView.builder是我要使用的东西。

class MyFeed extends StatelessWidget {
  const MyFeed({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: <Widget>[
          Container(
            decoration: BoxDecoration(color: Colors.black12),
            // margin: EdgeInsets.only(top: 10),
            child: HorizontalScrollView(),
            height: MediaQuery.of(context).size.height * .40,
          ),
          WhatsNewHeading(),
          VerticalFeedItem(),                        //Works
          VerticalFeedItem(),
          VerticalFeedItem(),
        ],
      ),
    );
  }
}

Feed屏幕：不起作用

class MyFeed extends StatelessWidget {
  const MyFeed({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: <Widget>[
          Container(
            decoration: BoxDecoration(color: Colors.black12),
            // margin: EdgeInsets.only(top: 10),
            child: HorizontalScrollView(),
            height: MediaQuery.of(context).size.height * .40,
          ),
          WhatsNewHeading(),
          VerticalFeed(),                       //Doesn't work
        ],
      ),
    );
  }
}

垂直Feed：

class VerticalFeed extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 4,
      itemBuilder: (ctx, i) => VerticalFeedItem(),
    );
  }
}

水平Feed：

class HorizontalScrollView extends StatelessWidget {
  final articles = DUMMY_ARTICLES;
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      scrollDirection: Axis.horizontal,
      itemBuilder: (ctx, i) => ArticleItem(
        article: articles[i].article,
        imageUrl: articles[i].imageUrl,
        id: articles[i].id,
        heading: articles[i].heading,
        capability: articles[i].capability,
        dateTime: DateTime.now(),
      ),
      itemCount: articles.length,
    );
  }
}

Answer 1

您只需要添加Listview.Builder的一个属性即可喜欢

ListView.builder(
  shrinkWrap: true,
  itemBuilder: (c,i)
  {
    return Text("ada");
  },
);

在两个listview构建器中都添加rinkleWrap：true

Answer 2

使用展开小部件包装VerticalFeed和HorizontalScrollView。

Column(
  children: <Widget>[
    Container(
      decoration: BoxDecoration(color: Colors.black12),
      // margin: EdgeInsets.only(top: 10),
      child: HorizontalScrollView(),
      height: MediaQuery.of(context).size.height * .40,
    ),
    Expanded(child: WhatsNewHeading()),
    Expanded(child: VerticalFeed()),
  ],
);

Answer 3

尝试将水平列表视图和垂直列表视图放在两个展开小部件中。我遇到了同样的问题，这是我的代码的一个示例，可以很好地工作：

  Scaffold(
   body: Column(
    children: <Widget>[
      Expanded(
        child: ListView(
          shrinkWrap: true,
          scrollDirection: Axis.horizontal,
          children: <Widget>[
          Your Widgets, 
          ],),), 
        Expanded(
        child: ListView(
          shrinkWrap: true,
          scrollDirection: Axis.vertical,
          children: <Widget>[
          Your Widgets, 
          ],),),]),);

同一列中的水平ListView.builder和垂直ListView.builder

3 个答案: