Flutter ListView 高度和 StaffoldextendBody: true

Question

我在单个页面上使用 ListView 构建器（其中多个）时遇到了一个“问题”。结合

CustomScrollView

和

SliverToBoxAdapter

，我能够构建 3 个具有垂直和水平滚动的不同 ListVIew-s。

此外，我还有 BottomNavigationBar，它具有透明背景和停靠在中间的浮动按钮。

Main Scaffold 将“extendBody”标志设置为 true，这将扩展

BottomNavigationBar

下面的内容。正是我想要的。

使用“extendBody”的问题和缺点是每个具有垂直滚动的 ListView 构建器都会在下面创建额外的填充以补偿 BottomNavigationBar 高度。

我尝试了很多方法来消除放置在页面上的每个 ListView 小部件中的填充。

解决方案：实际解决方案贴在下面

Answer 1

我花了一些时间弄清楚为什么会发生这种情况，解决方案很简单，原因是脚手架扩展了主体及其小部件的高度。

解决方案

创建自定义脚手架（创建单独的类，例如 my_scaffold.dart） 并将其添加到其中：

import 'package:flutter/material.dart';

// Use PreferredSizeWidget for appbar type, not just Widget
class MyCustomProdexScaffold extends StatelessWidget {
  final PreferredSizeWidget? appBar;
  final Widget body;
  final Widget? floatingActionButton;
  final FloatingActionButtonLocation? floatingActionButtonLocation;
  final Widget? bottomNavigationBar;
  final bool resizeToAvoidBottomInset;
  final bool extendBody;
  final bool extendBodyBehindAppBar;
  final Widget? drawer;

  const CustomProdexScaffold({
    Key? key,
    required this.body,
    this.appBar,
    this.floatingActionButton,
    this.floatingActionButtonLocation,
    this.bottomNavigationBar,
    this.resizeToAvoidBottomInset = true, // Set default to true
    this.extendBody = true, // Set default to true
    this.extendBodyBehindAppBar = false, // Set default to false
    this.drawer,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: appBar,
      body: CustomBody(child: body),
      floatingActionButton: floatingActionButton,
      floatingActionButtonLocation: floatingActionButtonLocation,
      bottomNavigationBar: bottomNavigationBar,
      resizeToAvoidBottomInset: resizeToAvoidBottomInset,
      extendBody: extendBody,
      extendBodyBehindAppBar: extendBodyBehindAppBar,
      drawer: drawer,
    );
  }
}
class CustomBody extends StatelessWidget {
  final Widget child;
  final double topPadding;
  final double bottomPadding;

  const CustomBody({
    Key? key,
    required this.child,
    this.topPadding = 0.0, // Default to no top padding
    this.bottomPadding = 0.0, // Default to no bottom padding
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.only(top: topPadding, bottom: bottomPadding),
      child: child,
    );
  }
}

如何使用

然后在页面中导入 my_scaffold.dart，然后你可以像这样调用该类：

import 'components/my_scaffold.dart';

// Your page with main widget tree
Widget build(BuildContext context) {    
    return MyCustomProdexScaffold(  // replace original Scaffold with new
      resizeToAvoidBottomInset: true,
      extendBody: true, // set this if required - in my case I needed it
      extendBodyBehindAppBar: false,
      drawer: null, // you can define your Drawer, I don't need one
      appBar: AppBar(
        automaticallyImplyLeading: false,
        backgroundColor: AppColors.prodexBlue,
        title: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Transform.translate(
              offset: const Offset(-2, -3),
              child: Image.asset('assets/images/prodexlogo.png', fit: BoxFit.contain, height: 42, alignment: FractionalOffset.center),
            ),
          ],
        ),
        iconTheme: const IconThemeData(color: Colors.white),
      ),
      body: // .... Stack(  any widget that you want here

现在，所有列表视图都不会扩展并占用更多的空间。这主要是在 GridView、ListView 等中的情况

我希望这对其他人有帮助！