可滚动的 Listview 问题 - Flutter答案

【问题标题】：Scrollable Listview issue - Flutter可滚动的 Listview 问题 - Flutter
【发布时间】：2020-12-30 16:09:54
【问题描述】：

class StoryUI extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Stories'),
        ),
        body: Column(
          children: [
            Text('Georgy'),
            Storycard(),
          ],
        ),
      ),
    );
  }
}

class Storycard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemBuilder: (context, int index) {
        return GestureDetector(
            child: Padding(
              padding: EdgeInsets.symmetric(vertical: 8, horizontal: 8),
              child: Card(
                elevation: 10,
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(16)),
                child: Column(
                  children: <Widget>[
                    ClipRRect(
                      child: Image.asset(
                        news[index].image,
                      ),
                      borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(16.0),
                          topRight: Radius.circular(16.0)),
                    ),
                    Padding(
                      padding: const EdgeInsets.all(10.0),
                      child: Text(news[index].newsHeadline,
                          style: GoogleFonts.ubuntu(
                              fontSize: 17, fontWeight: FontWeight.bold)),
                    )
                  ],
                ),
              ),
            ),
            onTap: () {
              Navigator.of(context).push(MaterialPageRoute(
                  builder: (context) => NewsDetails(news: news[index])));
            });
      },
      itemCount: news.length,
    );
  }
}

我想在这里有一个可滚动卡片的列表。我想要卡片上方的空间来添加一些文字。所以我尝试使用 column 并有一个文本和 Listview Builder 作为孩子。但是模拟器显示黑屏。

当 StoryCard() 单独用作主体时，输出带有小部件。我无法在 Listview 上方添加任何内容。有人可以帮忙吗？

enter image description here

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

将Expanded class 或Flexible class 用于ListView。

ListView 的内容需要一个有限的高度。

使用您当前的代码，ListView 的高度是无限的，因此会出现错误。 Expanded 或 Flexible 帮助您将剩余空间用于您的孩子

解决方案

class StoryUI extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Stories'),
        ),
        body: Column(
          children: [
            Text('Georgy'),
            // here is the change
            Expanded(
               child: Storycard()
            )
          ]
        )
      )
    );
  }
}

使用灵活

class StoryUI extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Stories'),
        ),
        body: Column(
          children: [
            Text('Georgy'),
            // here is the change
            Flexxible(
               fit: FlexFit.loose,
               child: Storycard()
            )
          ]
        )
      )
    );
  }
}

【讨论】：