Простое в использовании колесо Flutter рекомендует тринадцать плавающих кнопок для расширяемых возможностей флаттера.

Flutter
Простое в использовании колесо Flutter рекомендует тринадцать плавающих кнопок для расширяемых возможностей флаттера.

предисловие

Flutter — это платформа мобильного пользовательского интерфейса Google для быстрого создания высококачественных нативных пользовательских интерфейсов на iOS и Android.

Знаменитый Николас Гольбао в ИТ-индустрии однажды сказал: Колесо — это лестница ИТ-прогресса! Популярные фреймворки такие же, простые в использовании колеса, чтобы выбрать один из тысячи! В качестве кроссплатформенной среды разработки, появившейся за последние два года, сторонняя экосистема Flutter немного меньше, чем другие зрелые среды, но количество колес уже велико. В этой серии статей выбираются и делятся колесами, которые обычно используются в повседневной разработке приложений, чтобы повысить эффективность перемещения кирпичиков для всех.В то же время я надеюсь, что экология флаттера будет становиться все более и более совершенной, и будет все больше и больше больше колес.

В этой серии статей подготовлено более 50 рекомендаций по колесам, причины работы, и постарайтесь публиковать статью каждые 1-2 дня.

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

текст

рулевое колесо

  • Название колеса: flutter_speed_dial
  • Обзор колеса: плавающая кнопка для расширяемых параметров флаттера.
  • Руль: dario.ielardi@gmail.com
  • Рекомендуемый индекс: ★★★★
  • Общий индекс: ★★★
  • Предварительный просмотр эффекта:
    效果图

Установить

dependencies:
  flutter_speed_dial: ^1.2.4

import 'package:flutter_speed_dial/flutter_speed_dial.dart';

инструкции

Самый простой в использовании:

return Scaffold(
    body: Container(),
    floatingActionButton: SpeedDial(
     	child: Icon(Icons.add),
     	children:[
            SpeedDialChild(
                child: Icon(Icons.accessibility),
                backgroundColor: Colors.red,
                label: '第一个按钮',
                labelStyle: TextStyle(fontSize: 18.0),
                onTap: () => print('FIRST CHILD')
            ),
            SpeedDialChild(
                child: Icon(Icons.brush),
                backgroundColor: Colors.orange,
                label: '第二个按钮',
                labelStyle: TextStyle(fontSize: 18.0),
                onTap: () => print('SECOND CHILD'),
            ),
            SpeedDialChild(
                child: Icon(Icons.keyboard_voice),
                backgroundColor: Colors.green,
                label: '第三个按钮',
                labelStyle: TextStyle(fontSize: 18.0),
                onTap: () => print('THIRD CHILD'),
            ),
         ]
    ),
);

Все параметры, которые можно настроить:

floatingActionButton: SpeedDial(
    marginRight: 25,//右边距
    marginBottom: 50,//下边距
    animatedIcon: AnimatedIcons.menu_close,//带动画的按钮
    animatedIconTheme: IconThemeData(size: 22.0),
    visible: isShow,//是否显示按钮
    closeManually: false,//是否在点击子按钮后关闭展开项
    curve: Curves.bounceIn,//展开动画曲线
    overlayColor: Colors.black,//遮罩层颜色
    overlayOpacity: 0.5,//遮罩层透明度
    onOpen: () => print('OPENING DIAL'),//展开回调
    onClose: () => print('DIAL CLOSED'),//关闭回调
    tooltip: 'Speed Dial',//长按提示文字
    heroTag: 'speed-dial-hero-tag',//hero标记
    backgroundColor: Colors.blue,//按钮背景色
    foregroundColor: Colors.white,//按钮前景色/文字色
    elevation: 8.0,//阴影
    shape: CircleBorder(),//shape修饰
    children: [//子按钮
        SpeedDialChild(
            child: Icon(Icons.accessibility),
            backgroundColor: Colors.red,
            label: '第一个按钮',
            labelStyle: TextStyle(fontSize: 18.0),
            onTap: (){
                onButtonClick(1);
            }
        ),
        SpeedDialChild(
            child: Icon(Icons.brush),
            backgroundColor: Colors.orange,
            label: '第二个按钮',
            labelStyle: TextStyle(fontSize: 18.0),
            onTap: (){
                onButtonClick(2);
            },
        ),
        SpeedDialChild(
            child: Icon(Icons.keyboard_voice),
            backgroundColor: Colors.green,
            label: '第三个按钮',
            labelStyle: TextStyle(fontSize: 18.0),
            onTap: (){
                onButtonClick(3);
            },
        ),
    ],
),

конец

Категории