Flutter listview.separated inside SingldeChildScrollVİew

Question

我正在使用 flutter 開發應用程序，但我收到關於高度的錯誤。

我有一個 listview.separated 和一個 SingleChildScrollView。 我收到 flex 錯誤。

這是我在 Scaffold 和 SafeArea 中對齊小部件的文件。 我有一個 runApp 文件，但這對這個問題並不重要。

    class ProfilePageC extends StatelessWidget {
  const ProfilePageC({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          child: Column(
              children: [
               AboutTopBarW(), // It has not listview
               ImageFieldW(),  // It has no listview
               PercentsW(),    //It has no listview
               HomeArticleList2W() //It has a listview.separated  
            ],
          ),
        ),
      ),
    );
  }
}

這是我的 listview.separated 小部件文件。

  class HomeArticleList2W extends ConsumerWidget {
  const HomeArticleList2W({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final futureCatFacts = ref.watch(multiFutureArticleProvider);
    return Expanded(
      child: futureCatFacts.when(
        loading: () => const ShimmerHomeW(),
        error: (err, stack) => Text('Error: $err'),
        data: (data) {
      final decodedData = json.decode(data.body);
      return ListView.separated(
        separatorBuilder: (BuildContext context, int index) {
          if (index % 3 == 0) {
            return const Divider();
          }
          return const Divider();
        },
         shrinkWrap: true,
         physics: NeverScrollableScrollPhysics(),
        itemCount: decodedData.length ,
        itemBuilder: (BuildContext context, int index) {
          return Padding(
            padding: const EdgeInsets.only(
              left: 20,
              right: 20,
            ),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                ClipRRect(
                    borderRadius: BorderRadius.circular(10),
                    child: Image.network(
                      decodedData[index]['largeImage'].toString(),
                      fit: BoxFit.cover,
                      height: 70,
                      width: 70,
                    )),
                const SizedBox(
                  width: 10,
                ),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        decodedData[index]['title'],
                        style: const TextStyle(
                            fontSize: 15, fontWeight: FontWeight.bold),
                      ),
                      const SizedBox(
                        height: 5,
                      ),
                      Row(
                        children: [
                          const Icon(
                            Icons.av_timer_sharp,
                            size: 20,
                          ),
                          Text(decodedData[index]['date']),
                        ],
                      ),
                    ],
                  ),
                ),
                const SizedBox(
                  width: 5,
                ),
                const Icon(Icons.bookmark_border),
              ],
            ),
          );
        },
      );
        },
      ),
    );
  }
}

當我從 SingleChildScrollView 中刪除 HomeArticleList2W() 時沒有錯誤。 因此，我認為錯誤由 listview.separated 組成。 如何解決這個問題呢。

Answer 1

移除展開的小部件並添加 mainAxisSize min

Column(
  mainAxisSize: MainAxisSize.min,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        decodedData[index]['title'],
                        style: const TextStyle(
                            fontSize: 15, fontWeight: FontWeight.bold),
                      ),
                      const SizedBox(
                        height: 5,
                      ),
                      Row(
                        children: [
                          const Icon(
                            Icons.av_timer_sharp,
                            size: 20,
                          ),
                          Text(decodedData[index]['date']),
                        ],
                      ),
                    ],
                  ),