使用listview.builder后，垂直視口被賦予了無限的高度

我正在嘗試顯示來自 API 的新聞。我已獲取 API 資料并嘗試在螢屏上顯示它們。但是在嘗試這樣做時，我面臨著一個例外。這是我的

主頁.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 來獲取資料，但我得到一個例外并得到一個空白頁。有什么方法可以顯示我要顯示的資料。

uj5u.com熱心網友回復：

您可能正在卡片小部件內使用另一個建筑物。請洗掉它。

并使用此代碼：

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

其余的和以前一樣。這肯定會奏效。

標籤：扑镖

上一篇：如何根據Dart中的嵌套值對物件串列進行分組

下一篇：GoRouter包中的builder和pageBuilder有什么區別？