Flutter中如何去除settings_ui的SafeArea上下内边距并适配安全区？

问题描述 #

尝试移除Flutter settings_ui包中SafeArea的顶部、底部内边距失败，SettingsList组件出现多余空白，修改Scaffold背景色无法解决，根源是内边距配置问题。

代码示例：

Widget buildMobileLayout() {
  return SafeArea(
      child: SettingsList(sections: [
    SettingsSection(
      title: const Text(
          'Please select your region'),
      tiles: countries.map((region) {
        int index = countries.indexOf(region);
        return SettingsTile(
          title: Text(region.title),
          leading: Text(region.flag),
          trailing: selectedIndex == index
              ? const Icon(Icons.check_circle_rounded,
                  color: Color.fromARGB(255, 229, 228, 237), size: 24.0)
              : null,
          onPressed: (context) {
            setState(() {
              selectedIndex = index;
            });
            updateRegion(region.code);
          },
        );
      }).toList(),
    ),
  ]));
}

@override
Widget build(BuildContext context) {
  return Scaffold(
      backgroundColor: const Color(0xffF2F2F7),
      body: Scaffold(
          body: Responsive(
              desktop: buildMobileLayout(), mobile: buildMobileLayout())));
}

问题截图：

解决办法 #

• 移除外层手动SafeArea，用SettingsList自身配置
  settings_ui的SettingsList默认会处理安全区，外层再套SafeArea会导致双重内边距。直接去掉外层SafeArea，通过contentPadding自定义适配：

  Widget buildMobileLayout() {
    return SettingsList(
      contentPadding: EdgeInsets.only(
        top: MediaQuery.of(context).padding.top,
        bottom: MediaQuery.of(context).padding.bottom,
        left: 16,
        right: 16,
      ),
      sections: [
        SettingsSection(
          title: const Text('Please select your region'),
          tiles: countries.map((region) {
            int index = countries.indexOf(region);
            return SettingsTile(
              title: Text(region.title),
              leading: Text(region.flag),
              trailing: selectedIndex == index
                  ? const Icon(Icons.check_circle_rounded,
                      color: Color.fromARGB(255, 229, 228, 237), size: 24.0)
                  : null,
              onPressed: (context) {
                setState(() {
                  selectedIndex = index;
                });
                updateRegion(region.code);
              },
            );
          }).toList(),
        ),
      ],
    );
  }
  

• 禁用默认安全区，自定义Padding控制
  如果需要完全自主控制，设置SettingsList的useSafeArea为false，再手动添加适配安全区的内边距：

  Widget buildMobileLayout() {
    return Padding(
      padding: EdgeInsets.only(
        top: MediaQuery.of(context).padding.top,
        bottom: MediaQuery.of(context).padding.bottom,
      ),
      child: SettingsList(
        useSafeArea: false,
        sections: [
          // 你的Sections代码
        ],
      ),
    );
  }
  

• 修复嵌套Scaffold问题
  原代码中嵌套了两层Scaffold，会导致布局冗余，改成单层：

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xffF2F2F7),
      body: Responsive(
        desktop: buildMobileLayout(), 
        mobile: buildMobileLayout()
      ),
    );
  }
  

内容的提问来源于stack exchange，提问作者Shared User