如何在ListView.builder中擴展文本？

我正在嘗試建立一個包含所有國家的串列，我需要為所有國家添加灰色底線。

但是當我嘗試實作此功能時出現問題。這個border的寬度是左右截的，不知道為什么。

如何將這個邊框擴展為 ListView 的全部重量？

我要這個

但我只得到這樣的結果：

這就是我的代碼的樣子

這是我的代碼：

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

uj5u.com熱心網友回復：

嘗試添加contentPadding: EdgeInsets.zero到您的ListTile小部件：

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

而且，我看你Padding外面有一個左右12，如果不需要就去掉，那你的邊框線就全屏了

標籤：扑镖

上一篇：圓底AppBar

下一篇：FlutterGetX-如何管理控制器洗掉？