文章/答案/技术大牛

发布

社区首页 >问答首页 >使用listview.builder后，垂直视图被赋予无限高。

问使用listview.builder后，垂直视图被赋予无限高。
EN

Stack Overflow用户

提问于 2022-11-09 08:57:47

回答 1查看 40关注 0票数 1

我正在尝试显示来自API的新闻。我获取了API数据，并试图在屏幕上显示它们。但在努力做到这一点的同时，我面临着一个例外。这是我的

home.dart

import 'package:flutter/material.dart';

import 'Export.dart';

class Home extends StatefulWidget {
  const Home({super.key});

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  bool isVisible = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        scrollDirection: Axis.horizontal,
        physics: const ClampingScrollPhysics(),
        children: [
          const ShowNewsPage(),
          // const Photos(),
          // const Champions(),
          // const EventsPage(),
        ],
      ),
    );
  }
}

这是我的shownews.dart代码：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import '../../Controller/NewsController.dart';
import 'Export.dart';

class ShowNewsPage extends StatefulWidget {
  const ShowNewsPage({Key? key}) : super(key: key);

  @override
  State<ShowNewsPage> createState() => _ShowNewsPageState();
}

class _ShowNewsPageState extends State<ShowNewsPage> {
  bool _init = true;
  bool _isLoadingNews = false;
  @override
  void didChangeDependencies() async {
    if (_init) {
      _isLoadingNews =
          await Provider.of<NewsController>(context, listen: false).getNews();
    }
    _init = false;
    setState(() {});
    super.didChangeDependencies();
  }

  @override
  Widget build(BuildContext context) {
    final news = Provider.of<NewsController>(context).allNews;
    if (!_isLoadingNews) {
      return const Scaffold(
        body: Center(child: CircularProgressIndicator()),
      );
    } else {
      return Scaffold(
        body: ListView.builder(
          physics: const ScrollPhysics(),
          scrollDirection: Axis.vertical,
          itemCount: news.length,
          shrinkWrap: true,
          itemBuilder: (context, index) {
            return NewNewscardWidget(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              title: news[index].title!.rendered!,
              content: news[index].content!.rendered!,
              image: news[index].ogImage ?? [],
              id: news[index].id!,
              // authorName: news[index].author!,
              date: 'November 5, 2022',
            );
          },
        ),
      );
    }
  }
}

在使用listview.builder之后，我得到了这个异常，我还得到了一个空白页面：

垂直视图被赋予无限的高度。

我尝试使用listview.builder来获取数据，但是我得到了一个异常并得到了一个空白页。有没有办法显示我想显示的数据。

flutter

dart

Stack Overflow用户

回答已采纳

发布于 2022-11-09 15:59:52

您可能正在使用卡小部件内的另一栋大楼。请把它移开。

并使用以下代码：

import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';

class NewNewscardWidget extends StatelessWidget {
  const NewNewscardWidget({
    Key? key,
    required this.width,
    required this.height,
    required this.date,
    required this.title,
    required this.id,
    required this.content,
    this.image,
    // required this.authorName
  }) : super(key: key);

  final double width;
  final double height;
  final int id;
  final String title;
  final List? image;
  final String date;
  final String content;

  // final int authorName;

  @override
  Widget build(BuildContext context) {
    return UnconstrainedBox(
      child: Container(
        width: width,
        height: height,
        decoration: const BoxDecoration(
          color: Colors.white,
          boxShadow: [
            BoxShadow(
              color: Colors.grey, //color of shadow
              spreadRadius: 0.5,
              blurRadius: 3,
              offset: Offset(0, 1),
              //first paramerter of offset is left-right
              //second parameter is top to down
            ),
          ],
        ),
        child: Container(
          padding: EdgeInsets.symmetric(vertical: 5, horizontal: 5),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Center(
                child: Container(
                  height: height * .40,
                  width: width,
                  child:
                  ListView.builder(
                      itemCount: image!.length,
                      itemBuilder: (context, i) {
                        return Image.network(
                          image![0].url,

                          fit: BoxFit.fill,
                        );
                      }),
                ),
              ),
              const SizedBox(
                height: 15,
              ),
              Container(
                padding: const EdgeInsets.symmetric(horizontal: 5),
                child: Text(
                  title,
                  style: const TextStyle(
                    fontSize: 22,
                    fontWeight: FontWeight.w800,
                    letterSpacing: 1,
                  ),
                ),
              ),
              const SizedBox(
                height: 10,
              ),
              Container(
                padding: const EdgeInsets.only(left: 5, right: 5),
                child: Html(
                  data: content.substring(0, 600)
                ),
                // child: Text(
                //   content,
                //   style: const TextStyle(
                //     fontSize: 16,
                //     fontWeight: FontWeight.w300,
                //     fontFamily: 'NunitoSans',
                //   ),
                // ),
              ),
              const SizedBox(
                height: 10,
              ),
              Container(
                padding: const EdgeInsets.symmetric(horizontal: 5),
                child: Row(
                  children: [
                    const Text(
                      'By',
                      style: TextStyle(color: Colors.black45),
                    ),
                    const SizedBox(
                      width: 5,
                    ),
                    // Text(
                    //   ,
                    //   style: TextStyle(
                    //       fontWeight: FontWeight.w700,
                    //       color: Colors.black45),
                    // ),
                    const SizedBox(
                      width: 10,
                    ),
                    Text(date),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

其余的和以前一样。这肯定会奏效的。

票数 2

查看全部 1 条回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/74372207

复制

相似问题

问使用listview.builder后，垂直视图被赋予无限高。
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用listview.builder后，垂直视图被赋予无限高。EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用listview.builder后，垂直视图被赋予无限高。
EN