首页 > 解决方案 > Flutter BouncingScrollPhysics 在一个 StatefulWidget 中工作,但在一个几乎相同的小部件中不工作

问题描述

我有两个相同的 StatefulWidget“ProfileItemGridView”“ProfileNudgesGridView”,它们具有 BouncingScrollPhysics,但它只适用于 ProfileItemGridview 而不是另一个。我想问你是否可以查看每个代码片段,看看有什么不同。

一种工作是在 GridView 中显示图像,而一种不显示视频。这些是每个代码片段

“ProfileItemGridView”

    import 'dart:convert';

import 'package:ismile1/constants.dart';
import 'package:ismile1/data.dart';
import 'package:ismile1/models/items.dart';
import 'package:ismile1/providers/items_provider.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class ProfileItemGridView extends StatefulWidget {
  final ItemsProvider itemsProvider;
  final snapshot;
  final fromWhere;
  final callBack;
  const ProfileItemGridView({
    required this.itemsProvider,
    required this.snapshot,
    required this.fromWhere,
    Key? key,
    this.callBack,
  }) : super(key: key);

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

class _ProfileItemGridViewState extends State<ProfileItemGridView> {
  final scrollController = ScrollController();

  @override
  void initState() {
    super.initState();

    scrollController.addListener(scrollListener);
    print("profile.snapshot");
    widget.itemsProvider.fetchNextItems();
  }

  @override
  void dispose() {
    scrollController.dispose();
    super.dispose();
  }

  void scrollListener() {
    if (scrollController.offset >=
            scrollController.position.maxScrollExtent / 2 &&
        !scrollController.position.outOfRange) {
      if (widget.itemsProvider.hasNext) {
        widget.itemsProvider.fetchNextItems();
      }
    }
  }

  @override
  Widget build(BuildContext context) => CustomScrollView(
        physics: BouncingScrollPhysics(),
        controller: scrollController,
        slivers: [buildImages()],
      );

  Widget buildImages() => SliverGrid(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
          crossAxisSpacing: 1,
          mainAxisSpacing: 1,
          childAspectRatio: 1.0,
        ),
        delegate: SliverChildBuilderDelegate(
          (context, index) => ImageWidget(
              images: widget.itemsProvider.items[index].images,
              item: widget.itemsProvider.items[index],
              fromWhere: widget.fromWhere,
              itemsProvider: widget.itemsProvider,
              index: index,
              callBack: widget.callBack),
          childCount: widget.itemsProvider.items.length,
        ),
      );
}

class ImageWidget extends StatelessWidget {
  final List? images;
  final String? fromWhere;
  final Item? item;
  final ItemsProvider itemsProvider;
  final callBack;
  final index;
  ImageWidget({
    Key? key,
    required this.images,
    required this.itemsProvider,
    this.fromWhere,
    this.item,
    this.index,
    this.callBack,
  }) : super(key: key);

  bool isContained(String? keyString) {
    var contain;
    contain = itemsProvider.listOfItems
        .where((element) => element.keyString == keyString);
    return contain.isEmpty;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      child: fromWhere == 'nudge-detail'
          ? InkWell(
              onTap: () {
                Provider.of<ItemsProvider>(context, listen: false)
                    .addItem(item!);
                callBack(item!);
              },
              child: Card(
                shadowColor: Colors.red,
                shape: !isContained(item!.keyString)
                    ? RoundedRectangleBorder(
                        side: BorderSide(color: kPrimaryColor, width: 3),
                      )
                    : null,
                child: images!.length > 0
                    ? Image.network(
                        images![0],
                        fit: BoxFit.cover,
                      )
                    : Text(""),
              ),
            )
          : Card(
              child: images!.length > 0
                  ? Image.network(
                      images![0],
                      fit: BoxFit.cover,
                    )
                  : Text(""),
            ),
    );
  }
}

“ProfileNudgesGridView”

    import 'dart:convert';

import 'package:ismile1/providers/items_provider.dart';
import 'package:flutter/material.dart';
import 'package:ismile1/widgets/video_player_network.dart';

class ProfileNudgesGridView extends StatefulWidget {
  final NudgesProvider nudgesProvider;
  final snapshot;

  const ProfileNudgesGridView({
    required this.nudgesProvider,
    required this.snapshot,
    Key? key,
  }) : super(key: key);

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

class _ProfileNudgesGridViewState extends State<ProfileNudgesGridView> {
  final scrollController = ScrollController();

  @override
  void initState() {
    super.initState();

    scrollController.addListener(scrollListener);
    print("profile.snapshot");
    widget.nudgesProvider.fetchNextItems();
  }

  @override
  void dispose() {
    scrollController.dispose();
    super.dispose();
  }

  void scrollListener() {
    if (scrollController.offset >=
            scrollController.position.maxScrollExtent / 2 &&
        !scrollController.position.outOfRange) {
      if (widget.nudgesProvider.hasNext) {
        widget.nudgesProvider.fetchNextItems();
      }
    }
  }

  @override
  Widget build(BuildContext context) => CustomScrollView(
        physics: BouncingScrollPhysics(),
        controller: scrollController,
        slivers: [buildImages()],
      );

  Widget buildImages() => SliverGrid(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
          crossAxisSpacing: 1,
          mainAxisSpacing: 1,
          childAspectRatio: 0.68,
        ),
        delegate: SliverChildBuilderDelegate(
          (context, index) => VideoItemWithPlayButton(
              video: widget.nudgesProvider.items[index].video![0]),
          childCount: widget.nudgesProvider.items.length,
        ),
      );
}

class ImageWidget extends StatelessWidget {
  final List? images;

  const ImageWidget({
    Key? key,
    required this.images,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) => Container(
        width: double.infinity,
        child: Card(
          child: images!.length > 0
              ? Image.network(
                  images![0],
                  fit: BoxFit.cover,
                )
              : Text(""),
        ),
      );
}

标签: flutterflutter-layout

解决方案


推荐阅读