flutter 如何在ListView.builder中展开文本?

bvpmtnay  于 2022-11-17  发布在  Flutter
关注(0)|答案(1)|浏览(214)

我正在努力与所有国家建立一个清单,我需要给所有国家加上一条灰色底线。
但是当我尝试实现这个功能的时候,有一个问题,这个边框的宽度是从左到右切的,我不知道为什么。
如何将此边框扩展为ListView的全重?
I want this
但我只得到这样的结果:
This is how it looks like with my code
这是我的代码:

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

  @override
  State<Countries> createState() => _CountriesState();
}

class _CountriesState extends State<Countries> {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
            height: 235,
            child: Padding(
                    padding: const EdgeInsets.only(top: 8, left: 12, right: 12),
                    child: Container(
                      decoration: BoxDecoration(
                          border: Border.all(color: AppColors.gray2F2D2D),
                          borderRadius: BorderRadius.circular(8.0)),
                      child: Column(
                        children: [
                          Flexible(
                            child: ListView.builder(
                              itemCount: countries.length,
                              scrollDirection: Axis.vertical,
                              shrinkWrap: true,
                              itemBuilder: (context, index) {
                                return ListTile(
                                  title: Container(
                                    decoration: BoxDecoration(
                                      border: Border(
                                        bottom: BorderSide(width: 1, color: AppColors.gray2F2D2D)
                                      )
                                    ),
                                    child: Padding(
                                      padding: const EdgeInsets.only(
                                        top: 16,
                                        bottom: 16,
                                        left: 20
                                      ),
                                      child: Text(
                                        countries[index],
                                        style: const TextStyle(
                                            color: AppColors.grayA0A0A0,
                                            fontSize: 16,
                                            fontWeight: FontWeight.w500),
                                      ),
                                    ),
                                  ),
                                );
                              },
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
          ),
  }
}
kupeojn6

kupeojn61#

尝试将contentPadding: EdgeInsets.zero添加到您的ListTile小工具:

return ListTile(
   contentPadding: EdgeInsets.zero,
   // your item widget
)

而且,我看到你有一个Padding左右12的外框,如果你不需要的话就把它去掉,这样你的边框线就会全屏了

相关问题