Flutter реализует анимированную карточную навигацию по вкладкам | Nuggets Technical Papers

Технологии Nuggets призывают к публикации Flutter Dart

предисловие

Я общаюсь с Flutter меньше месяца, и я глубоко ощутил мощь этой платформы, поэтому продолжал учиться.flutter_gallery, хорошая демонстрация функций каждого виджета Flutter

Среди них содержание анимации показывает非常漂亮的 带有动画和拖拽功能的 可展开的Навигация по вкладкам в карточном стиле очень красивая, но ее реализация не абстрагирует виджет, который может использоваться третьими лицами, а настройка содержимого его страницы недостаточно дружелюбна, и есть ошибки при скольжении, я оптимизировал его на основе ему

Официальный показал очень хороший пример с открытым исходным кодом.Я модифицировал его, но я не осмеливаюсь наслаждаться им в одиночку.Теперь я поделюсь им с вами.Добро пожаловать, чтобы общаться больше.

Внешний вид

выполнить

Вот мой код:GitHub/Realank

Использовать этот элемент управления очень просто, сначала определите данные страницы:

const Color _mariner = const Color(0xFF3B5F8F);
const Color _mediumPurple = const Color(0xFF8266D4);
const Color _tomato = const Color(0xFFF95B57);
const Color _mySin = const Color(0xFFF3A646);

List<CardSection> allSections = <CardSection>[
  new CardSection(
      title: 'First Page',
      leftColor: _mediumPurple,
      rightColor: _mariner,
      contentWidget: Center(child: new Text('第一页'))),
  new CardSection(
      title: 'Second Page',
      leftColor: _mariner,
      rightColor: _mySin,
      contentWidget: Center(child: new Text('第二页'))),
  new CardSection(
      title: 'Third Page',
      leftColor: _mySin,
      rightColor: _tomato,
      contentWidget: Center(child: new Text('第三页'))),
  new CardSection(
      title: 'Forth Page',
      leftColor: _tomato,
      rightColor: Colors.blue,
      contentWidget: Center(child: new Text('第四页'))),
  new CardSection(
      title: 'Fifth Page',
      leftColor: Colors.blue,
      rightColor: _mediumPurple,
      contentWidget: Center(child: new Text('第五页'))),
];

Затем создайте этот элемент управления:

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      home: new Scaffold(
        body: Center(
          child: new AnimateTabNavigation(
            sectionList: allSections,
          ),
        ),
      ),
    );
  }
}

ты закончил

принцип

Если вы это знаете, то должны знать и почему.Поговорим о принципе реализации этого управления.

Во-первых, структура данных определена в section.dart:


class CardSection {
  CardSection({this.title, this.leftColor, this.rightColor, this.contentWidget});

  final String title;
  final Color leftColor;
  final Color rightColor;
  final Widget contentWidget;

  @override
  bool operator ==(Object other) {
    if (other is! CardSection) return false;
    final CardSection otherSection = other;
    return title == otherSection.title;
  }

  @override
  int get hashCode => title.hashCode;
}

Он определяет заголовок одной из карточек, левый цвет и правый цвет (для отображения эффекта перехода цвета), а также дочерние элементы управления (это мое улучшение, чтобы другие могли добавлять элементы управления по своему желанию, когда они его используют). )

Затем определите несколько виджетов в widgets.dart:

  • SectionCard : титульная карточка
  • SectionTitle : Заголовок
  • SectionIndicator : декоративная линия под заголовком

Наконец, это содержимое выложено в cardNavigation.dart, код здесь очень сложный, а идея несложная:

  1. Определите высоту maxHeight вкладки полноэкранного отображения и высоту minHeight вкладки, отображаемой вверху после открытия вкладки.
  2. Когда пользователь перетаскивает вкладку, прогресс анимации (0,0-1,0) рассчитывается в соответствии с отношением положения карточки к minHeight и maxHeight.
  3. В _AllSectionsLayout столбецCardRect карты определяется, когда вкладка отображается в полноэкранном режиме, и rowCardRectt, когда вкладка отображается вверху после открытия вкладки.
  4. Вычислите размер прямоугольника промежуточного состояния двух прямоугольников в процессе анимации 0-1 и назначьте его каждой карте, чтобы карта имела вид промежуточного состояния.
  5. Когда пользователь щелкает область вкладки, запускается метод _maybeScroll, который определяет, является ли текущая вкладка полноэкранным или открытым.
  6. Когда вкладка развернута на весь экран, разверните соответствующую вкладку.
  7. Когда вкладка уже открыта, определяется положение клика, в левой части панели вкладок страница переворачивается влево, и наоборот.

От 0 до 1: Моя трепетарная техническая практика | Наггетс Технический призыв к документам, призыв к документам ведется

Категории