Как сделать «просмотр списка сложенных карт» во флаттере? - PullRequest
Новая
       5

Как сделать «просмотр списка сложенных карт» во флаттере?

0 голосов
/ 02 февраля 2019

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

https://github.com/loopeer/CardStackView/blob/master/screenshot/screenshot1.gif

enter image description here

Ключевые идеальные функции:.

  • Вела себя как представление списка, но карточки должны располагаться вверху экрана.
  • Список может содержать бесконечные элементы.Таким образом, старые карты должны быть переработаны для экономии памяти.
  • Я также хочу установить разный размер для каждой карты.

Во-первых, я нашел несколько «трутов», таких как пользовательский интерфейс, как показано ниже, и попыталсяих.https://blog.geekyants.com/tinder-swipe-in-flutter-7e4fc56021bc

Тем не менее, пользователям нужно сильно ударить каждую отдельную карту, что требовало от пользователя многократного пролистывания для просмотра элементов списка.

И тогда я мог бы каким-то образом создать представление списка, чьи элементы перекрываются.со следующими. 

import 'package:flutter/material.dart';

class StackedList extends StatelessWidget {
  List<ItemCard> cards = [];

  StackedList() {
    for (int i = 0; i < 20; i++) {
      cards.add(ItemCard(i));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('title')),
      body: Container(
        child: ListView.builder(
          itemBuilder: (context, index) {
            return Align(
              alignment: Alignment.topCenter,
              heightFactor: 0.8,
              child: cards[index],
            );
          },
          itemCount: cards.length,
        ),
      ),
    );
  }
}

class ItemCard extends StatelessWidget {
  int index;

  ItemCard(this.index);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
        boxShadow: [
          BoxShadow(color: Colors.black, blurRadius: 20.0),
        ],
      ),
      child: SizedBox.fromSize(
        size: const Size(300, 400),
        child: Card(
          elevation: 5.0,
          color: index % 2 == 0 ? Colors.blue : Colors.red,
          child: Center(
            child: Text(index.toString()),
          ),
        ),
      ),
    );
  }
}

Однако элементы не останавливаются в верхней части экрана, что не совсем то, что я хочу.Я думаю, что могу добиться этого эффекта, настроив ScrollController или ScrollPhysics, но я не уверен, где мне следует изменить.

1 Ответ

0 голосов
/ 15 августа 2019

Вы можете добиться аналогичного поведения с помощью SliverPersistentHeader и CustomScrollView, и вы можете обернуть свои карты в GestureDetector, чтобы изменить их высоту, изменив значение параметра SliverPersistentHeaderDelegate maxExtent.Вот небольшое приложение, которое я написал, которое дает нечто, похожее на то, что вы ищете: 

import 'package:flutter/material.dart';
import 'dart:math' as math;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Stacked list example',
      home: Scaffold(
          appBar: AppBar(
            title: Text("Stacked list example"),
            backgroundColor: Colors.black,
          ),
          body: StackedList()),
    );
  }
}

class StackedList extends StatelessWidget {
  final List<Color> _colors = Colors.primaries;
  static const _minHeight = 16.0;
  static const _maxHeight = 120.0;

  @override
  Widget build(BuildContext context) => CustomScrollView(
        slivers: _colors
            .map(
              (color) => StackedListChild(
                minHeight: _minHeight,
                maxHeight: _colors.indexOf(color) == _colors.length - 1
                    ? MediaQuery.of(context).size.height
                    : _maxHeight,
                pinned: true,
                child: Container(
                  color: _colors.indexOf(color) == 0
                      ? Colors.black
                      : _colors[_colors.indexOf(color) - 1],
                  child: Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.vertical(
                          top: Radius.circular(_minHeight)),
                      color: color,
                    ),
                  ),
                ),
              ),
            )
            .toList(),
      );
}

class StackedListChild extends StatelessWidget {
  final double minHeight;
  final double maxHeight;
  final bool pinned;
  final bool floating;
  final Widget child;

  SliverPersistentHeaderDelegate get _delegate => _StackedListDelegate(
      minHeight: minHeight, maxHeight: maxHeight, child: child);

  const StackedListChild({
    Key key,
    @required this.minHeight,
    @required this.maxHeight,
    @required this.child,
    this.pinned = false,
    this.floating = false,
  })  : assert(child != null),
        assert(minHeight != null),
        assert(maxHeight != null),
        assert(pinned != null),
        assert(floating != null),
        super(key: key);

  @override
  Widget build(BuildContext context) => SliverPersistentHeader(
      key: key, pinned: pinned, floating: floating, delegate: _delegate);
}

class _StackedListDelegate extends SliverPersistentHeaderDelegate {
  final double minHeight;
  final double maxHeight;
  final Widget child;

  _StackedListDelegate({
    @required this.minHeight,
    @required this.maxHeight,
    @required this.child,
  });

  @override
  double get minExtent => minHeight;

  @override
  double get maxExtent => math.max(maxHeight, minHeight);

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return new SizedBox.expand(child: child);
  }

  @override
  bool shouldRebuild(_StackedListDelegate oldDelegate) {
    return maxHeight != oldDelegate.maxHeight ||
        minHeight != oldDelegate.minHeight ||
        child != oldDelegate.child;
  }
}

Вот как это выглядит в действии:

Пример составного списка.gif

И вот действительно хорошая статья о лентах Флаттера, которая может помочь вам в этом отношении:

Щепки, демистифицированные

Надеюсь, это поможет вам в правильном направлении.

...