предисловие
Flutter — это платформа мобильного пользовательского интерфейса Google для быстрого создания высококачественных нативных пользовательских интерфейсов на iOS и Android.
Знаменитый Николас Гольбао в ИТ-индустрии однажды сказал: Колесо — это лестница ИТ-прогресса! Популярные фреймворки такие же, простые в использовании колеса, чтобы выбрать один из тысячи! В качестве кроссплатформенной среды разработки, появившейся за последние два года, сторонняя экосистема Flutter немного меньше, чем другие зрелые среды, но количество колес уже велико. В этой серии статей выбираются и делятся колесами, которые обычно используются в повседневной разработке приложений, чтобы повысить эффективность перемещения кирпичиков для всех.В то же время я надеюсь, что экология флаттера будет становиться все более и более совершенной, и будет все больше и больше больше колес.
В этой серии статей подготовлено более 50 рекомендаций по колесам, причины работы, и постарайтесь публиковать статью каждые 1-2 дня.
совет: эта серия статей подходит для разработчиков, у которых уже есть основы флаттера.Чтобы начать, нажмите:официальный сайт флаттера
текст
рулевое колесо
- Название колеса: Alke_button
- Обзор колеса: эффект Tweet Like с анимацией прокрутки количества
- Колесо Автор: zmtzawqlp
- Рекомендуемый индекс: ★★★★
- Общий индекс: ★★★★
- Предварительный просмотр эффекта:
Установить
dependencies:
like_button: ^0.1.9
import 'package:like_button/like_button.dart';
Введение в использование
Использование очень простое, просто виджет:
LikeButton()
с номерами:
LikeButton(likeCount:520)
Пользовательские значки:
LikeButton(
likeBuilder: (bool isLiked){
return Icon(Icons.person);
},
)
Пользовательский значок + номер:
LikeButton(
likeBuilder: (bool isLiked){
return Icon(Icons.person);
},
likeCount:520
)
Пользовательский значок + пользовательский цвет пузыря + номер:
LikeButton(
likeBuilder: (bool isLiked){
return Icon(Icons.person,color: isLiked ? Colors.blue : Colors.grey,);
},
likeCount:520,
circleColor:CircleColor(start: Color(0xff00ddff), end: Color(0xff0099cc)),
bubblesColor: BubblesColor(
dotPrimaryColor: Color(0xff33b5e5),
dotSecondaryColor: Color(0xff0099cc),
),
)
Пользовательский значок + пользовательский цвет пузыря + украшение номера:
LikeButton(
likeBuilder: (bool isLiked){
return Icon(Icons.person,color: isLiked ? Colors.blue : Colors.grey,);
},
likeCount:520,
circleColor:CircleColor(start: Color(0xff00ddff), end: Color(0xff0099cc)),
bubblesColor: BubblesColor(
dotPrimaryColor: Color(0xff33b5e5),
dotSecondaryColor: Color(0xff0099cc),
),
countBuilder: (int count, bool isLiked, String text) {
var color = isLiked?Colors.red:Colors.grey;
Widget result;
result = Text(
text,
style: TextStyle(color: color,fontSize: 20),
);
return result;
},
countDecoration:(Widget count){
return Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
count,
SizedBox(
width: 10.0,
),
Text(
"loves",
style: TextStyle(color: Colors.indigoAccent),
)
],
);
}
)
Изменение состояния по запросу
LikeButton(
onTap: (bool isLiked)
{
return onLikeButtonTap(isLiked, item);
}
)
Это асинхронный обратный вызов, вы можете дождаться возврата службы, прежде чем изменять состояние. Вы также можете сначала изменить состояние и сбросить его обратно в состояние после сбоя запроса.
Future<bool> onLikeButtonTap(bool isLiked, TuChongItem item) {
///send your request here
///
final Completer<bool> completer = new Completer<bool>();
Timer(const Duration(milliseconds: 200), () {
item.isFavorite = !item.isFavorite;
item.favorites =
item.isFavorite ? item.favorites + 1 : item.favorites - 1;
// if your request is failed,return null,
completer.complete(item.isFavorite);
});
return completer.future;
}
Технические характеристики
| параметр | описывать | По умолчанию |
|---|---|---|
| size | как размер виджета | 30.0 |
| animationDuration | как время анимации виджета | const Duration(milliseconds: 1000) |
| bubblesSize | Размер пузырьков во время анимации | size * 2.0 |
| bubblesColor | Цвет пузырей во время анимации нужно задать 4 вида | const BubblesColor(dotPrimaryColor: const Color(0xFFFFC107),dotSecondaryColor: const Color(0xFFFF9800),dotThirdColor: const Color(0xFFFF5722),dotLastColor: const Color(0xFFF44336),) |
| circleSize | Максимальный размер круга во время анимации | size * 0.8 |
| circleColor | Цвет круга при анимации нужно задать 2 вида | const CircleColor(start: const Color(0xFFFF5722), end: const Color(0xFFFFC107) |
| onTap | Обратный вызов при нажатии можно запросить у сервиса изменение состояния в нем | |
| isLiked | вам нравится это. Если установлено значение null, всегда будет анимация, и количество лайков будет продолжать расти. | false |
| likeCount | как количество. Если ноль, не отображать | null |
| mainAxisAlignment | MainAxisAlignment, подобные виджеты и подобные виджеты count размещаются в строке, соответствующей свойству mainAxisAlignment строки. | MainAxisAlignment.center |
| likeBuilder | Обратный вызов создания виджета Like | null |
| countBuilder | Создать обратный вызов для виджета подсчета лайков | null |
| likeCountAnimationDuration | как время анимации изменения количества | const Duration(milliseconds: 500) |
| likeCountAnimationType | Отдайте предпочтение типу анимации количества (нет, часть, все). Без анимации; только измененная часть; все части | LikeCountAnimationType.part |
| likeCountPadding | Интервал между виджетом лайков и виджетом лайков | const EdgeInsets.only(left: 3.0) |
| countPostion | Положение верхнего, правого, нижнего, левого счета (вверх, вниз, влево и вправо) | CountPostion.right |
| countDecoration | Декоратор для подсчета, вы можете использовать его, чтобы добавить другой текст или эффекты для подсчета | null |
конец
- Адрес склада колес: г.универсальный.flutter-io.capable/packages/li…
- Исходный код демонстрационной версии серии:GitHub.com/826327700/…