ListView.builder 项目仍然出现在滚动之外

Question

我在 PageView.builder 中有一个 ListView.builder。当 ListView 元素到达滚动的末尾时，项目的颜色仍然出现在滚动之外。我可能没有解释自己，我添加了它的图像。

This is the initial state

When I start scrolling it becomes like that

我还添加了我的代码。超出它的原因是什么？

class NewBookingPage extends StatefulWidget {
  const NewBookingPage({Key? key}) : super(key: key);

  @override
  _NewBookingPageState createState() => _NewBookingPageState();
}

class _NewBookingPageState extends State<NewBookingPage> with SingleTickerProviderStateMixin {
  late final AnimationController animationController;
  final pageController = PageController();

  @override
  void initState() {
    super.initState();
    animationController = AnimationController(vsync: this, value: 0.25);
    animationController.addListener(() {
      setState(() {});
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: Padding(
          padding: EdgeInsets.fromLTRB(16, 0, 0, 0),
          child: IconButton(
            onPressed: () {
              if (pageController.page != 0) {
                animationController.animateTo(
                  animationController.value - 0.25,
                  curve: Curves.easeOut,
                  duration: Duration(milliseconds: 300),
                );
                pageController.previousPage(
                  duration: Duration(milliseconds: 300),
                  curve: Curves.easeOut,
                );
              } else {
                Navigator.of(context).pop();
              }
            },
            icon: SvgPicture.asset(
              "assets/icons/arrow_back.svg",
              color: text900,
            ),
          ),
        ),
        title: Text(
          "Reservation",
          style: Theme.of(context).appBarTheme.titleTextStyle,
        ),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Padding(
                  padding: const EdgeInsets.fromLTRB(24, 24, 24, 0),
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(12),
                    child: LinearProgressIndicator(
                      color: primary500,
                      backgroundColor: text300,
                      value: animationController.value,
                    ),
                  ),
                ),
                SizedBox(height: 24),
                Expanded(
                  child: PageView.custom(
                    controller: pageController,
                    scrollBehavior: NoGlowingScrollBehavior(),
                    physics: NeverScrollableScrollPhysics(),
                    childrenDelegate: SliverChildListDelegate.fixed(
                      [DateTab(), HoursTab()],
                    ),
                  ),
                ),
              ],
            ),
          ),
          Container(
            decoration: BoxDecoration(
              color: Colors.white,
              boxShadow: [
                BoxShadow(
                  color: Color(0xFF204C3C0A).withOpacity(0.04),
                  offset: Offset(0, -4),
                  spreadRadius: 2,
                  blurRadius: 12,
                ),
              ],
            ),
            child: Padding(
              padding: const EdgeInsets.fromLTRB(24, 16, 24, 16),
              child: ElevatedButton(
                onPressed: () async {
                  animationController.animateTo(
                    0.5,
                    curve: Curves.easeOut,
                    duration: Duration(milliseconds: 300),
                  );
                  pageController.nextPage(
                    duration: Duration(milliseconds: 300),
                    curve: Curves.easeOut,
                  );
                },
                child: Text("Next"),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class HoursTab extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 24),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            "Choose hour",
            style: Theme.of(context).textTheme.headline3,
          ),
          SizedBox(height: 16),
          Expanded(
            child: ScrollConfiguration(
              behavior: NoGlowingScrollBehavior(),
              child: ListView.builder(
                itemCount: 10,
                itemBuilder: (context, index) {
                  var isFull = index % 2 == 0;

                  return Padding(
                    padding: const EdgeInsets.symmetric(vertical: 8),
                    child: DecoratedBox(
                      decoration: BoxDecoration(
                        border: Border.all(color: text200, width: 1),
                        borderRadius: BorderRadius.circular(8),
                      ),
                      child: ListTile(
                        enabled: !isFull,
                        tileColor: isFull ? text100 : null,
                        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
                        leading: Radio<bool>(
                          activeColor: primary500,
                          value: index == 3,
                          groupValue: true,
                          onChanged: (a) {},
                        ),
                        horizontalTitleGap: 0,
                        contentPadding: EdgeInsets.only(right: 20),
                        trailing: isFull
                            ? Chip(
                                labelStyle: Theme.of(context).textTheme.subtitle2?.copyWith(color: text700),
                                label: Text("Full"),
                                backgroundColor: text200,
                              )
                            : null,
                        title: Text(
                          "15:00 - 16:00",
                          style: Theme.of(context).textTheme.bodyText1?.copyWith(color: isFull ? text500 : text900),
                        ),
                      ),
                    ),
                  );
                },
              ),
            ),
          )
        ],
      ),
    );
  }
}

class NoGlowingScrollBehavior extends ScrollBehavior {
  @override
  Widget buildOverscrollIndicator(BuildContext context, Widget child, ScrollableDetails details) {
    return child;
  }
}

Answer 1

问题似乎是由 ListTile Color 引起的错误。所以不要使用tileColor，而是使用BoxDecoration 的color 属性：

itemBuilder: (context, index) {
                var isFull = index % 2 == 0;

                return Padding(
                  padding: const EdgeInsets.symmetric(vertical: 8),
                  child: DecoratedBox(
                    decoration: BoxDecoration(
                      border: Border.all(color: Colors.grey.shade200, width: 1),
                      borderRadius: BorderRadius.circular(8),
                      color: isFull ? Colors.grey.shade100 : null // add it here
                    ),
                    child: ListTile(
                      enabled: !isFull,
                      // tileColor: isFull ? Colors.grey.shade100 : null, remove this line
                      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
                      leading: Radio<bool>(
                        value: index == 3,
                        groupValue: true,
                        onChanged: (a) {},
                      ),
                      horizontalTitleGap: 0,
                      contentPadding: EdgeInsets.only(right: 20),
                      trailing: isFull
                          ? Chip(
                        labelStyle: Theme.of(context).textTheme.subtitle2,
                        label: Text("Full"),
                      )
                          : null,
                      title: Text(
                        "15:00 - 16:00",
                        style: Theme.of(context).textTheme.bodyText1?.copyWith(color: isFull ? Colors.grey.shade500 : Colors.grey.shade900),
                      ),
                    ),
                  ),
                );
              }