Используйте флаттер для создания крутых списков

Flutter

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

Стиль по-прежнему очень красивый, давайте завершим этот небольшой проект шаг за шагом.

Подготовка перед разработкой

  • Мы будем использовать виджет, такой как FadeInImage, для загрузки сетевого изображения, для которого требуется значок загрузки, поэтому нам нужно настроить статические ресурсы в pubspec.yaml.В проекте можно использовать только настроенные статические ресурсы.
assets:
   - assets/images/
  • Необходимо имитировать некоторые фальшивые данные и некоторые часто используемые константы, поэтому для управления создается специальный файл Constant.dart.
    colors  # 颜色
    data  # list的数据
    # ...

раздел панели приложений

  • AppBar нуждается в прозрачном фоне, чтобы изображение позади могло отображаться, что выглядит очень захватывающим.
  • Вам нужно установить высоты на 0, чтобы вы могли отменить специфичный для Android эффект тени.Вот код:
Scaffold(
    appBar: AppBar(
    backgroundColor: Colors.transparent,
    elevation: 0,
    title: Text(
        'flutter awesome list',
        style: TextStyle(
        color: Colors.white,
        ),
    ),
    ),
    body: HomeBody(),
);

Баннерный раздел

  • Нам нужно использовать weidget Transform.translate(), чтобы переместить часть баннера вверх, чтобы вся панель приложения отображалась на баннере.Указанное здесь смещение равно смещению: Offset(0, -56), а 56 – это высота. панели приложений
  • Следующая скошенная форма должна быть создана с помощью ClipPath(), который немного похож на холст.Код выглядит следующим образом:
class MyClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path p = Path();
    p.lineTo(size.width, 0.0);
    p.lineTo(size.width, size.height / 4.75);
    p.lineTo(0.0, size.height / 3.75);
    p.close();
    return p;
  }

  @override
  bool shouldReclip(CustomClipper oldClipper) {
    return true;
  }
}
  • Для отображения информации о пользователе используются виджеты ListTile и CircleAvatar. Использование относительно простое. Я напрямую вставляю код:
ListTile(
    leading: CircleAvatar(
    backgroundImage: NetworkImage(CONSTANT.userAvatar),
    ),
    title: Text(
    CONSTANT.userName,
    style: CONSTANT.defaultTextStyle,
    textScaleFactor: 1.5,
    ),
    subtitle: Text(
    CONSTANT.userProfile,
    style: CONSTANT.defaultTextStyle,
    ),
)

Часть отображения списка

  • Для отображения списка используется ListView.builder() с двумя обязательными параметрами itemCount и itemBuilder. Первый управляет количеством списков, а второй — отображением элементов. Поскольку стилей элементов по-прежнему много, они разделены на отдельные StatelessWidgets.Компонент: AwesomeListItem
  • Мы оборачиваем AwesomeListItem с компонентом InkWell.InkWell — это компонент, который поставляется с флаттером.Особенностью этого компонента является то, что он имеет эффект растекания чернил при нажатии. При нажатии на элемент мы используем Navigator.push для перехода на страницу сведений.
  • Для отображения изображений мы по-прежнему используем FadeInImage, и пользовательский опыт этого эффекта плавного появления по-прежнему очень хорош. Затем используйте Hero() для обертывания FadeInImage, который может обеспечить анимацию перехода между изображениями при переходе страницы, что очень мощно и круто.
Hero(
    tag: index,
    child: FadeInImage(
        image: NetworkImage(data.image),
        fit: BoxFit.cover,
        placeholder: AssetImage('assets/images/loading.gif'),
    ),
)

Страница сведений

Последнее - это отображение страницы сведений. На этой странице нет стиля. Он показывает эффект перехода изображения при переходе со страницы списка. Заинтересованные студенты могут обогатить стиль и содержание следующей страницы.

конец

Категории