Listview.builder -> 即使我输入较小的值,容器的高度在 Flutter 中也会拉伸?

问题描述 投票:0回答:1

由于列的原因,我正在使用 Listview.builder 并将其展开作为其父级,但我在该公告板小部件的底部得到了空白空间。

我用了各种方法来阻止这个空间,但都没有得到想要的结果。

如有建议,我们将不胜感激。

这是我正在使用的代码:

Expanded(
          child: StreamBuilder<List<NoticeBoardModel>>(
              stream: FireBaseNoticeBoardService().getAllNotice(),
              builder: (context, snapshot) {
                if (snapshot.connectionState == ConnectionState.waiting) {
                  return const Center(
                    child: CircularProgressIndicator(),
                  );
                } else {
                  if (snapshot.data?.isNotEmpty == true) {
                    return ListView.builder(
                      shrinkWrap: true,
                      scrollDirection: Axis.horizontal,
                      itemCount: snapshot.data?.length,
                      itemBuilder: (context,index) {
                        return Padding(
                          padding: const EdgeInsets.only(left: 8.0,right: 8.0),
                          child: Align(
                            alignment: Alignment.topCenter,
                            child: Container(
                              height: 150,
                              width: 150,
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(8),
                                  color: Color(int.parse(snapshot.data![index].noticeColor ?? AppColors.noticeModelColorPink.value.toString(),radix: 16))
                              ),
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Expanded(
                                    child: Padding(
                                      padding: const EdgeInsets.only(top: 8,left: 8, right: 8),
                                      child: Text(snapshot.data![index].noticeTitle ?? "No title found for this notice",
                                        style: Theme.of(context).textTheme.headline3?.copyWith(fontWeight: FontWeight.bold),
                                      ),
                                    ),
                                  ),
                                  Expanded(child: Container()),
                                  Padding(
                                    padding: const EdgeInsets.only(bottom: 8,left: 8, right: 8),
                                    child: Text(snapshot.data![index].createdDate !=null ? dateFormatString(snapshot.data![index].createdDate!) : "No Date Found",
                                      style: Theme.of(context).textTheme.headline3?.copyWith(color: AppColors.appBlackColor.withOpacity(0.5),fontWeight: FontWeight.bold),
                                      overflow: TextOverflow.ellipsis,
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        );
                      },);
                  } else {
                    return const Center(
                      child: Text('No Data Exist'),
                    );
                  }
                }
              }),
        ),
android ios flutter expanded
1个回答
0
投票

当您已经在项目

Container( height: 150,
上使用固定高度时,您可以使用 SizedBox 包装 ListView 并将其提供在顶部 [包括填充]。不需要扩展小部件,或者特别不需要
shrinkWrap:true

 return SizedBox(
   height: 150+ 0, // 0 padding based on your ui.
   child: ListView.builder(
    scrollDirection: Axis.horizontal,
    itemCount: snapshot.data?.length,
    itemBuilder: (context,index) {
© www.soinside.com 2019 - 2024. All rights reserved.