100 строк кода для реализации собственной панели вкладок Flutter

Flutter

Flutter действительно очень мощный, но ложка дегтя в том, что экологию еще предстоит улучшить, и нет такой всемогущей базовой UI-библиотеки, как фронтенд Antd или Element.

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

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

Во-первых, голы и эффекты

Цели спроса:

  1. Не эту страницуmaterialЕдиная клавиша возврата и заголовок слева
  2. Справа есть кнопка отмены, нажмите «Отмена», чтобы вернуться
  3. Нажмите Tab, чтобы добиться переключения контента с анимационными эффектами.
  4. Проведите по области содержимого, чтобы переключить вкладки

Эффект следующий:

Во-вторых, реализация идеи

Разделите всю страницу на две части: кнопку Tab вверху и область содержимого внизу.

Чтобы сохранить общность, и вкладка выше, и область содержимого ниже должны быть переданы вызывающей стороной, они обаWidgetмножество

class STab extends StatefulWidget {
  // tab 集合
  final List<Widget> tabs;
  // 页面集合
  final List<Widget> pages;

  STab({this.tabs, this.pages});

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

Общий вид страницы представляет собойColumn, верхняя часть — это область вкладок, а нижняя — область содержимого сExpandОбернуты для достижения эффекта заполнения всего экрана.

Макет вкладки выше, самый внешний слойStackмакет, потому что кнопка отмены всегда должна быть справа и не может влиять на типографику кнопки вкладки. Горизонтальное расположение кнопок с несколькими вкладкамиRowдля упорядочивания и установки выравнивания по центру.

  @override
  Widget build(BuildContext context) {
    return Container(
        child: Column(
      children: [
        TabLayout(widget.tabs, selectedIndex, onTabChange, onCancelClick),
        ContentLayout(widget.pages, swipeControl, onPageChange)
      ],
    ));
  }

В области содержимого ниже для достижения эффекта скольжения влево и вправо используется сторонняя библиотекаflutter_swiper. При нажатии на вкладку установите нижний индекс салфетки для переключения отображаемого содержимого; при скольжении салфетки влево и вправо установите выбранное состояние вкладки, чтобы добиться связи между выбранным состоянием вкладки и скольжением салфетки.

3. Упаковка компонентов

/// tab 切换组件
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

class STab extends StatefulWidget {
  // tab 集合
  final List<Widget> tabs;

  // 页面集合
  final List<Widget> pages;

  STab({this.tabs, this.pages});

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

class _STabState extends State<STab> {
  int selectedIndex = 0;
  SwiperController swipeControl = new SwiperController();

  // tab 索引变化回调
  void onTabChange(index) {
    setState(() {
      selectedIndex = index;
    });
    swipeControl.move(index);
  }

  void onCancelClick() {
    print('cancel');
  }

  void onPageChange(index) {
    setState(() {
      selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        child: Column(
      children: [
        TabLayout(widget.tabs, selectedIndex, onTabChange, onCancelClick),
        ContentLayout(widget.pages, swipeControl, onPageChange)
      ],
    ));
  }
}

/// 上面 Tab 的布局
Widget TabLayout(tabs, selectedIndex, onTabChange, onRightButtonClick) {
  List<Widget> getItem() {
    List<Widget> children = [];
    for (var i = 0; i < tabs.length; i++) {
      children.add(
        GestureDetector(
            onTap: () {
              onTabChange(i);
            },
            child: Container(
              padding: EdgeInsets.only(left: 20, right: 20, bottom: 10),
              decoration: BoxDecoration(
                  border: Border(
                      bottom: BorderSide(
                          color: selectedIndex == i
                              ? Color(0xff595959)
                              : Colors.transparent,
                          width: 3))),
              child: tabs[i],
            )),
      );
    }
    return children;
  }

  return Stack(
    children: [
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: getItem(),
      ),
      Positioned(
          top: 0,
          right: 0,
          child: GestureDetector(
            child: Container(
              height: 40,
              padding: EdgeInsets.only(left: 10, right: 10, bottom: 10),
              child: Text(
                '取消',
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 16),
              ),
            ),
            onTap: () {
              onRightButtonClick();
            },
          ))
    ],
  );
}

/// 下面页面内容布局
Widget ContentLayout(pages, swipeControl, onIndexChanged) {
  return Expanded(
    child: Container(
        decoration: BoxDecoration(color: Colors.white),
        child: Swiper(
          itemCount: pages.length,
          itemBuilder: (BuildContext context, int index) {
            return pages[index];
          },
          loop: false,
          onIndexChanged: (index) {
            onIndexChanged(index);
          },
          controller: swipeControl,
        )),
  );
}

4. Как использовать

Просто перейдите во вкладки и страницы страниц

class Demo extends StatelessWidget {

  final List<Widget> tabBodies = [
    ExpensePage(),
    IncomePage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
          padding: EdgeInsets.only(top: 30),
          decoration: BoxDecoration(
              color: Color(0xffF9DC62)
          ),
          child: STab(
            tabs: [
              Text('支出', style: TextStyle(fontSize: 18, color: Colors.black),),
              Text('收入', style: TextStyle(fontSize: 18, color: Colors.black)),
            ],
            pages: tabBodies,
          ),
      ),
    );
  }
}

V. Заключение

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

Что касается уровня упаковки, то его можно считать хорошим, он подходит и достаточен.

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

Категории