Как перекрывать элементы в ListView - PullRequest
0 голосов
/ 29 января 2020

Я пытаюсь воссоздать эффект вкладки, который приложение Safari имеет на IOS, когда вкладки расположены друг на друге в виде вкладок, и вы можете прокручивать их.

Снимок экрана приложения с помощью стеки

Screenshot of the app using stacks

Я успешно добился этого эффекта, однако я использую SingleChildScrollView и виджет Stack. Проблема состоит в том, что это изо всех сил, чтобы поддерживать 30 кадров в секунду.

  @override
  Widget build(BuildContext context) {
    final double containerHeight = widget.workout.length * _cardSpacing + _cardHeight - _cardSpacing;

    return SingleChildScrollView(
      key: PageStorageKey<String>(widget.keyString),
      controller: _scrollController,
      child: Container(
        height: containerHeight,
        child: Stack(
          children: List<Widget>.generate(
            widget.workout.length,
            (int index) => ExerciseCard(
              scrollController: _scrollController,
              topPosition: index * _cardSpacing,
              exercise: widget.workout[index],
              cardSpacing: _cardSpacing,
              cardHeight: _cardHeight,
            ),
          ),
        ),
      ),
    );
  }

Вращение и перспектива каждой карты не зависят от других и зависят от положения карт на экране и смещения контроллера прокрутки. Я попытался отключить преобразование, и у меня все еще плохая производительность, поэтому я думаю, что проблема заключается в том, что это SingleChildScrolView, а не ListView. Я пытался изучить CustomScrollView и Flow, но у меня был небольшой успех. Любое руководство будет оценено.

Peters-MacBook-Pro:maxes pcrady$ flutter doctor 
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v1.13.6, on Mac OS X 10.15.2 19C57, locale en)

[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 11.3.1)
[✓] Android Studio (version 3.5)
[✓] Connected device (1 available)

• No issues found!
...