likes
comments
collection
share

一个顶N个！Flutter界面开发提速大杀器Getwidget 🚀（二）

作者站长头像
站长
· 阅读数 44

前言

Flutter 是 Google 开源的应用开发框架，仅通过一套代码就能构建支持Android、iOS、Windows、Linux等多平台的应用。Flutter的性能非常高，拥有120fps的刷新率，也是目前非常流行的跨平台UI开发框架。

本专栏为大家收集了Github上近70个优秀开源库，后续也将持续更新。希望可以帮助大家提升搬砖效率，同时祝愿Flutter的生态越来越完善🎉🎉。

Getwidget 索引

第一篇：按钮 GFButton、角标 GFBadge、头像 GFAvatar、图片 GFImage、卡片 GFCard

👉 第二篇：轮播图 GFCarousel、列表模版 GFListTile、标签栏 GFTabBar、浮动组件 GFFloatingWidget

第三篇：提示框 GFToast、开关 GFToggle、文字排版 GFTypography、抽屉 GFDrawer、弹窗 GFAlert、折叠卡片 GFAccordion

第四篇：导航条 GFAppBar、搜索栏 GFSearchBar、评分组件 GFRating、加载提示 GFLoader、进度条 GFProgressBar

第五篇：闪光组件 GFShimmer、动画 GFAnimation、边框 GFBorder、底部抽屉 GFBottomSheet、复选框 GFCheckbox

第六篇：可选列表模板 GFCheckboxListTile、下拉选择框 GFMultiSelect、介绍屏GFIntroScreen、单选按钮 GFRadio、粘性标题 GFStickyHeader

正文

一、🚀 轮子介绍

  • 名称：getwidget
  • 概述：GetWidget完全免费，内置了1000多个预构建的小组件，您可以使用这些小组件加快自己开发进程并构建出色的应用。
  • 出版商：navin10sharma@gmail.com
  • 仓库地址：getwidget
  • 推荐指数： ⭐️⭐️⭐️⭐️⭐️
  • 常用指数： ⭐️⭐️⭐️⭐️⭐️
  • 预览： 长图预览请戳

二、⚙️ 安装及使用

dependencies:
  getwidget: ^2.0.5

import 'package:getwidget/getwidget.dart';

三、🗂 组件示例

6. 轮播图 GFCarousel

一个顶N个！Flutter界面开发提速大杀器Getwidget 🚀（二）

属性及含义介绍

属性描述
items子组件数组，一般为图片
hasPagination是否展示分页圆点，默认false
pagerSize圆点尺寸
passiveIndicator未选中圆点颜色
activeIndicator选中圆点颜色
passiveDotBorder未选中圆点边框
activeDotBorder选中圆点边框
height轮播图高度
aspectRatio若没有声明高度则使用宽高比，默认16:9
viewportFraction每个页面占轮播图宽度的比例，默认0.8
initialPage默认选中下标
enableInfiniteScroll轮播图是否无限滚动,默认true
autoPlay是否自动播放
reverse内容顺序是否反转，默认false，若设置为true，autoPlay也会反向滚动
autoPlayInterval自动播放间隔时长，默认4s
autoPlayAnimationDurationautoPlay设置为true时，自动播放切换动画时长，默认800ms
autoPlayCurve动画曲线，默认Curves.fastOutSlowIn
pauseAutoPlayOnTouchautoPlay为true时生效，设置一个检测触摸的计时器，在此时长内暂停播放，若不设置此项会发现当自动播放时若通过手势拖动轮播图，轮播图在切换至item后会立即切换到下一个item
scrollPhysics当用户取消拖动手势后将如何继续动画（默认根据偏移比例决定是滚动到下一个item还是滚动回上一个item，很少需要设置此项）
enlargeMainPage当前item是否高于两侧item，用于增加视觉上的层次感，默认false
onPageChanged页面切换回调
// 数据源
final List<String> imageList = [
"https://cdn.pixabay.com/photo/2017/12/03/18/04/christmas-balls-2995437_960_720.jpg",
"https://cdn.pixabay.com/photo/2017/12/13/00/23/christmas-3015776_960_720.jpg",
"https://cdn.pixabay.com/photo/2019/12/19/10/55/christmas-market-4705877_960_720.jpg",
"https://cdn.pixabay.com/photo/2019/12/20/00/03/road-4707345_960_720.jpg",
"https://cdn.pixabay.com/photo/2019/12/22/04/18/x-mas-4711785__340.jpg",
"https://cdn.pixabay.com/photo/2016/11/22/07/09/spruce-1848543__340.jpg"
];

1.GFCarousel可以满足一般项目中的轮播图需求，这是一个简单的示例，只需要指定items，就可以得到一个基础样式的轮播图⬇️

一个顶N个！Flutter界面开发提速大杀器Getwidget 🚀（二）

GFCarousel(
    items: imageList.map(
        (url) {
            return GFImageOverlay(
                image: NetworkImage(url),
            );
        },).toList(),
)

2.另外可以使用GFItemsCarousel来实现多图片样式，GFItemsCarousel属性：

属性描述
rowCount一个页面上展示的item数量
children子组件数组
onSlideStart开始滑动回调
onSlide滑动回调
onSlideEnd滑动结束回调

一个顶N个！Flutter界面开发提速大杀器Getwidget 🚀（二）

GFItemsCarousel(
    rowCount: 3,
    children: imageList.map(
        (url) {
            return Container(
                margin: EdgeInsets.all(5.0),
                    child: ClipRRect(
                        borderRadius: BorderRadius.all(Radius.circular(5.0)),
                        child: Image.network(url,
                        fit: BoxFit.cover, width: 1000.0),
                    ),
            );
        },
    ).toList(),
)

可以看到GFItemsCarousel的可定制属性还是比较少的，暂时也不支持自动和无限滚动，不能算是真正意义上的轮播图，目前也许更适合将其当作一个带弹簧效果的横向滚动列表来使用。

7. 列表模版 GFListTile

一个顶N个！Flutter界面开发提速大杀器Getwidget 🚀（二）

属性及含义介绍

属性描述
titleText标题文本
subTitleText副标题文本
icon图标
color背景颜色
avatar标题、副标题等左侧的组件，一般为图片，默认为空
title标题组件，titleText为null时生效
subTitle副标题组件，subTitleText为null时生效
description描述组件，位于title及subtitle下方
padding内边距
margin外边距
enabled是否可交互
onTap点击回调
onLongPress长按回调
selected选中状态
focusColor具有输入焦点时的背景颜色（可将description设为TextField来查看此效果）
focusNode定义此组件的键盘焦点
autofocus若没有其他组件已经聚焦时，此组件的聚焦状态，默认false
hoverColor鼠标指针悬浮在该项时的背景颜色

1.如果你看过上一篇文章中卡片组件的话可能会觉得眼熟，没错这里⬇️用的就是GFListTile 一个顶N个！Flutter界面开发提速大杀器Getwidget 🚀（二）

这张图应该可以更直观的展示widget之间的关系，例如添加图片组件，标题及副标题会向右挪来留出空间。 一个顶N个！Flutter界面开发提速大杀器Getwidget 🚀（二）

一般开发中遇到这样的列表样式都会采用在Container中嵌套使用Column、Row来实现，如果有多种列表样式，代码处理起来就会比较繁杂，使用GFListTile可以很大程度缓解这个问题，这是一个简单的示例：

一个顶N个！Flutter界面开发提速大杀器Getwidget 🚀（二）

GFListTile(
    color: Colors.white,
    avatar:
    GFAvatar(backgroundImage: AssetImage('images/gyz.png')),
    titleText: '孤勇者',
    subTitleText: '陈奕迅',
    icon: Icon(Icons.play_circle),
)

8.标签栏 GFTabBar

一个顶N个！Flutter界面开发提速大杀器Getwidget 🚀（二）

Tabbar几乎在每个App中都有使用，在Getwidget系列组件中，GFTabBar通常与GFTabBarView一起使用，所以一般直接用GFTabs组件（前两者的组合）即可。

1.GFTabBar 属性及含义介绍

属性描述
length选项（子界面）总数，通常大于1，需要和TabBar.tabs和TabBarView.children的长度保持一致
controller控制器（tabController，必须）
tabs可以是任何类型的小组件，通常为button或button+text
isScrollable标签栏是否可以滚动
tabBarHeight标签栏高度
tabBarColor标签栏颜色
indicatorColor标签栏下方线条颜色
indicatorWeight标签栏下方线条厚度
indicatorPadding可设置标签栏下方线条的左右侧边距（上下边距将被忽略），若指定了indicator则此项忽略
indicator定义标签栏下方线条的外观，若此项不为null，则indicatorColor、indicatorWeight和indicatorPadding将被忽略
indicatorSize定义如何计算标签栏下方线条的大小，TabBarIndicatorSize.label：根据子组件宽度定义，默认TabBarIndicatorSize.tab：根据整体边界定义，
labelColor选中标签颜色，该颜色的百分之七十透明度为未选中标签颜色
labelStyle标签字体风格
labelPadding标签字体边距
unselectedLabelColor未选中标签颜色，默认为百分之七十透明度的选中颜色
shape定义标签栏的形状
width标签栏的整体宽度

首先要为GFTabBar指定TabController

late TabController tabController;

@override
void initState() {
    super.initState();
    tabController = TabController(length: 4, vsync: this);
}
@override
void dispose() {
    tabController.dispose();
    super.dispose();
}

1.GFTabBar示例

一个顶N个！Flutter界面开发提速大杀器Getwidget 🚀（二）

GFTabBar(
    length: 4,
    controller: tabController,
    tabs: [
        Tab(
            icon: Icon(Icons.directions_bike),
            child: Text(
                "Tab1",
            ),
        ),
        Tab(
            icon: Icon(Icons.directions_bus),
            child: Text(
                "Tab2",
            ),
        ),
        Tab(
            icon: Icon(Icons.directions_railway),
            child: Text(
                "Tab3",
            ),
        ),
        Tab(
            icon: Icon(Icons.airplanemode_active),
            child: Text(
                "Tab4",
            ),
        ),
    ],
)

2.GFTabBarVIew

一个顶N个！Flutter界面开发提速大杀器Getwidget 🚀（二）

属性描述
height高度
controller控制器（tabController）
physics当用户取消拖动手势后将如何继续动画（默认根据偏移比例决定是滚动到下一个item还是滚动回上一个item，很少需要设置此项）
dragStartBehavior处理开始拖动行为的方式，DragStartBehavior.down、默认DragStartBehavior.start
children子组件，通常为界面容器
GFTabBarView(
    height: 200,
    controller: tabController,
    children: <Widget>[
        Container(color: Colors.red),
        Container(color: Colors.green),
        Container(color: Colors.blue),
        Container(color: Colors.cyan)
]),

3.GFTabs:GFTabBar与GFTabBarView的组合

一个顶N个！Flutter界面开发提速大杀器Getwidget 🚀（二）

属性描述
length选项（子界面）总数，通常大于1，需要和TabBar.tabs和TabBarView.children的长度保持一致
initialIndex初始索引，默认0
heighttabs + tabBarView 的高度
tabs可以是任何类型的小组件，通常为button或button+text
tabBarViewGFTabBarView
controller控制器（tabController，必须）
isScrollable标签栏是否可以滚动
tabBarHeight标签栏高度
tabBarColor标签栏颜色
indicatorColor标签栏下方线条颜色
indicatorWeight标签栏下方线条厚度
indicatorPadding可设置标签栏下方线条的左右侧边距（上下边距将被忽略），若指定了indicator则此项忽略
indicator定义标签栏下方线条的外观，若此项不为null，则indicatorColor、indicatorWeight和indicatorPadding将被忽略
indicatorSize定义如何计算标签栏下方线条的大小，TabBarIndicatorSize.label：根据子组件宽度定义，默认TabBarIndicatorSize.tab：根据整体边界定义，
labelColor选中标签颜色，该颜色的百分之七十透明度为未选中标签颜色
labelStyle标签字体风格
labelPadding标签字体边距
unselectedLabelColor未选中标签颜色，默认为百分之七十透明度的选中颜色
unselectedLabelStyle未选中标签风格
shape定义标签栏的形状
width标签栏的整体宽度
GFTabs(
    controller: tabController,
    length: 3,
    indicatorColor: Colors.orange,
    tabs: <Widget>[
        Tab(
        icon: Icon(Icons.directions_bike),
        child: Text(
                "Tab1",
            ),
        ),
        Tab(
        icon: Icon(Icons.directions_bus),
        child: Text(
                "Tab2",
            ),
        ),
        Tab(
        icon: Icon(Icons.directions_railway),
        child: Text(
            "Tab3",
            ),
        ),
    ],
    tabBarView: GFTabBarView(
        controller: tabController,
        children: <Widget>[
            Container(
                child: Icon(Icons.directions_bike),
                color: Colors.red,
            ),
            Container(
                child: Icon(Icons.directions_bus),
                color: Colors.blue,
            ),
            Container(
                child: Icon(Icons.directions_railway),
                color: Colors.orange,
            ),
        ],
    ),
),

4.Getwidget还为我们提供了一个tabs的替代品可与GFTabBarView搭配使用——GFSegmentTabs：

一个顶N个！Flutter界面开发提速大杀器Getwidget 🚀（二）

属性描述
tabController控制器（tabController）
length选项总数
tabs选项子组件，示例中为text
height高度
width总宽度
border边框
borderRadius圆角
tabBarColor背景颜色
indicatorColor选中颜色
GFSegmentTabs(
    tabController: tabController,
    length: 3,
    tabs: <Widget>[
        Text(
            "Tab1",
        ),
        Text(
            "Tab2",
        ),
        Text(
            "Tab3",
        ),
    ],
),

5.GFTabBar也可以当作底部导航栏使用：

一个顶N个！Flutter界面开发提速大杀器Getwidget 🚀（二）

Scaffold(
      appBar: GFAppBar(
        title: const Text('UI Kit'),
      ),
      body: GFTabBarView(controller: tabController, children: <Widget>[
        Container(color: Colors.red),
        Container(color: Colors.green),
        Container(color: Colors.blue)
      ]),
      bottomNavigationBar: GFTabBar(
       length: 3,
        controller: tabController,
        tabs: [
          Tab(
            icon: Icon(Icons.directions_bike),
            child: const Text(
              'Tab1',
            ),
          ),
          Tab(
            icon: Icon(Icons.directions_bus),
            child: const Text(
              'Tab2',
            ),
          ),
          Tab(
            icon: Icon(Icons.directions_railway),
            child: const Text(
              'Tab3',
            ),
          ),
        ],
      ),
    )

9.浮动小组件 GFFloatingWidget

这是个啥呢，其实在很多App中都有它的身影，比如外卖点餐平台，首页一侧也会显示一个小按钮提醒外卖距你还有多远，GFFloatingWidget可以理解为一个两层的Stack，上层是浮动组件，下层就是界面中原本的body。

一个顶N个！Flutter界面开发提速大杀器Getwidget 🚀（二）

属性含义
child浮动组件
body通常为body，也可以是任何其他组件
verticalPosition纵向偏移
horizontalPosition横向偏移
showBlurness是否模糊背景，默认false
Scaffold(
    body: GFFloatingWidget(
        child: GFIconBadge(
            child: GFAvatar(
                size: GFSize.LARGE,
                backgroundImage: AssetImage('images/mypicture.png'),
            ),
            counterChild: GFBadge(
                text: '12',
            shape: GFBadgeShape.circle,
        )), // 浮动组件
        body: Container(
        color: Colors.blue,
        ), // 通常为body，也可以是任何其他组件
        verticalPosition: MediaQuery.of(context).size.height * 0.7, 
        horizontalPosition: MediaQuery.of(context).size.width * 0.8, 
        showBlurness: false, 
));
转载自:https://juejin.cn/post/7079838044873818149
评论
请登录