thefutter底部被xx像素溢出

Question

我正在尝试构建一个带有多个小部件行，列，扩展，列表视图等的页面...

我有点困惑。我想要一个可以用小部件滚动的页面themelist。 我有错误：

底部的28像素溢出的renderflex。

class SettingsViewState extends State<SettingsView> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      drawer: const NavDrawer(),
      appBar: AppBar(
        title: Text(AppLocalizations.of(context)!.settingsTitle),
        backgroundColor: Theme.of(context).primaryColor,
      ),
      body: CustomScrollView(slivers: [
        SliverFillRemaining(
          child: Column(
            children: const [
              ThemeList(),
              SizedBox(height: 8),
              ThemeList(),
              SizedBox(height: 8),
              ThemeList(),
            ],
          ),
        ),
      ]),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Padding(
        padding: const EdgeInsets.all(10),
        child: Container(
          decoration: BoxDecoration(
            border: Border.all(color: Theme.of(context).primaryColor, width: 2),
            borderRadius: BorderRadius.circular(10),
          ),
          child: Column(
            children: <Widget>[
              Row(
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.only(top: 5, left: 20),
                    child: Text(
                      AppLocalizations.of(context)!.settingsThemeSubTitle,
                      style: const TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 23,
                      ),
                    ),
                  )
                ],
              ),
              ListView.builder(
                shrinkWrap: true,
                padding: const EdgeInsets.all(8),
                itemCount: AppTheme.values.length,
                itemBuilder: (context, index) {
                  final itemAppTheme = AppTheme.values[index];
                  var nameTheme = itemAppTheme.toString()
                  return Card(
                    color: appThemeData[itemAppTheme]?.primaryColor,
                    child: ListTile(
                      title: Text(
                        nameTheme,
                        style: appThemeData[itemAppTheme]?.textTheme.bodyText1,
                      ),
                      onTap: () {
                        BlocProvider.of<ThemeBloc>(context).add(
                          ThemeChanged(theme: itemAppTheme),
                        );
                        Preferences.saveTheme(itemAppTheme);
                      },
                    ),
                  );
                },
              )
            ],
          ),
        ),
      ),
    );
  }
}

所需结果：

Answer 1

只需用themelist将内部包装listView.builder（）用展开，问题就会消失。

---

如果您想在每个themelist中都使用滚动显示整个屏幕中的所有

1. 项目脚手架 be singlechildscrollview，列作为其孩子。
2. 在themelist的开始时删除扩展的。
3. 删除listView.builder（）在themelist中，并用任何循环逻辑替换以直接渲染卡片，例如：

...AppTheme.values.map((itemAppTheme) {
  var nameTheme = itemAppTheme.toString();
  return Card(
    color: appThemeData[itemAppTheme]?.primaryColor,
    child: ListTile(
      title: Text(
        nameTheme,
        style: appThemeData[itemAppTheme]?.textTheme.bodyText1,
      ),
      onTap: () {
        BlocProvider.of<ThemeBloc>(context).add(
          ThemeChanged(theme: itemAppTheme),
        );
        Preferences.saveTheme(itemAppTheme);
      },
    ),
  );
}).toList()