基础组件

Features

1. base_widgets 基础组件
2. common_pages 公共页面
3. future_builder 封装futureBuilder
4. refresh 封装刷新组件

Getting started

Sil_base_widget_package:
    git:
      url: http://gitlab.changshaxiemeng.com/xiemeng/fultter/flutter/Sil_alert_dialog_package
      ref: laster

Usage

一、基础组件 1.1 简单基础组件

  /// 初始化基础widget,设置适配基于的设计尺寸
  SilBaseWidgetSetting.init(designSize: Size(375, 667));

  /// 虚线
  SilDashLine(Size.fromHeight(0.5), color: Colors.yellow[800], spacing: 2);

  /// 文本
  SilText('data', style: TextStyle(fontSize: 14), textAlign: TextAlign.center);

  /// 加载本地图片
  SilImage('imgPath', height: 40, width: 40);

  /// 加载网络图片
  SilImage(
      'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F017e0155fa35d232f875a132692718.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653704266&t=370e33972e19e13c0b6129d15d9d37fa',
      placeholder: Container(color: Colors.yellow, width: 20, height: 20));

  /// 文本按钮
  SilButton(
    title: '文本按钮',
    radius: 6,
    titleColor: Colors.yellow,
    height: 50,
    width: 80,
    borderWidth: 1,
    onTapFunc: () {},
  );

  /// 图标按钮
  SilButton(
    imgPath:
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F017e0155fa35d232f875a132692718.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653704266&t=370e33972e19e13c0b6129d15d9d37fa',
    borderColor: Colors.black12,
    borderWidth: 2,
    radius: 4,
    width: 60,
    height: 60,
    onTapFunc: () {},
  );

  /// 文本图标按钮
  SilTextIconButton(
    SilText('设置'),
    SilLocalImage('imgs/commom/setting.png'),
    imagePosition: ImagePosition.Left,
    space: 10,
    onTap: () {},
  );

  /// 单选按钮
  SilRadioButton(
    mormalWidget: SilImage('imgs/commom/normal.png'),
    selectedWidget: SilImage('imgs/commom/selected.png'),
    height: 30.w,
    width: 30.w,
  );

  /// 空数据页面
  // 1 通过data参数设置
  SilEmptyDataWidget(
      emptyData: SilEmptyData(
          imagePath: 'hello.img', prompt: '这里空空如也', btnTitle: '前往游戏库，探索更多游戏'));

  // 2 自定义空页面
  Widget customContent() {
    return Container(
      alignment: Alignment.center,
      margin: EdgeInsets.only(top: 120, left: 20, right: 20),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          SilLocalImage('imgs/common/common_nodata.png',
              width: 200.w, height: 200.w),
          Padding(padding: EdgeInsets.only(top: 5)),
          SilText("暂无数据～",
              style: TextStyle(color: Color(0xFF666666), fontSize: 16.sp)),
        ],
      ),
    );
  }

  SilEmptyDataWidget(customWidget: customContent());

  /// 网络异常页面
  SilNetErrorWidget(
      prompt: '当前网络不给力',
      bottomButtonTitle: '点击屏幕重试',
      reloadFunc: () {},
      customWidget: Container());

  /// 输入框
inputDemo() {
  return Container(
    color: Colors.yellow,
    child: SilTextField(
      hintText: "请输入密码",
      interface: SilFormattersPwd(),
      onValid: (bool valid, String value) {
        print("valid = ${valid},value = ${value}");
      },
      min: 8,
      max: 10,
    ),
  );

1.2 组合组件：底部弹窗Sheet选择器

  /// 直接使用基础组件
  testSilBottomPickerWidget() {
    return SilBottomSheet.show(
        context: context,
        child: SilBottomPickerBaseWidget(
          child: Container(height: 100, color: Colors.yellow),
        ));
  }

  /// 测试时间选择器组件
  int initialHours = 8;
  int initialMinute = 10;
  testSilBottomTimePickerWidget() {
    return SilBottomSheet.show(
        context: context,
        child: SilBottomTimePickerWidget(
          '提醒时间',
          initialHours: initialHours,
          initialMinute: initialMinute,
          themeColor: Color.fromRGBO(255, 0, 134, 1),
          tapSureSeletedFunc: (int hour, int minute) {
            initialHours = hour;
            initialMinute = minute;
            Navigator.pop(context);
          },
        ));
  }

  /// 测试时间日期选择器
  /// 默认选中的日期和时间
  DateTime initialDateTime = DateTime.now();
  testSilBottomDatePickerWidget() {
    SilBottomSheet.show(
        context: context,
        child: SilBottomDatePickerWidget('请选择生产日期',
            mode: CupertinoDatePickerMode.date,
            use24hFormat: true,
            themeColor: Color.fromRGBO(255, 0, 134, 1),
            dateOrder: DatePickerDateOrder.ymd,
            initialDateTime: initialDateTime,
            tapSureSeletedFunc: (DateTime time) {
          initialDateTime = time;
          Navigator.pop(context);
        }));
  }

  /// 测试单条数据选择器
  List<String> list = ['120', '300', '600', '1200', '18000'];
  int selectedIndex = 0;
  testSilBottomPickerSimpleWidget() {
    SilBottomSheet.show(
        context: context,
        child: SilBottomPickerSimpleWidget(
          '开封保质期',
          middlePrompt: '个月',
          middlePromptPadding: EdgeInsets.only(left: 100),
          initialSelectedItem: selectedIndex,
          dataList: list,
          themeColor: Color.fromRGBO(255, 0, 134, 1),
          tapSureSeletedFunc: (index) {
            selectedIndex = index;
            Navigator.pop(context);
          },
        ));
    
    /// 底部弹窗菜单
    List<String> items = ['相机', '相册'];
    SilBottomSheet.show(
        context: context,
        child: SilBottomSheetWidget(
          itemList: items,
          warnTitle: '删除',
          tapSureSeletedFunc: (index) {
            print('选中了第$index个');
            Navigator.pop(context);
          },
          tapWarnFunc: () {
            print('点击了删除');
            Navigator.pop(context);
          },
        ));

    /// 顶部分栏组件
    SilTopTabBarWidget(
      titles: ['GM游戏', 'SFC游戏', 'SFC游戏'],
      indicatorWidth: 24.w,
      isShowCenter: true,
      itemBuilder: (context, index) {
        if (index == 0) return Container(color: Colors.yellow);

        return Container(color: Colors.green);
      });

二、SilFutureBuilderWidget 封装网络异步加载组件

/// SilFutureBuilderWidget 封装网络异步加载组件
/// 可以设置加载时的loading，没有数据时的空页面，网络加载失败的错误页面
/// 使用：
/// 可以使用一个类实现接口方法（例如SilFutureBuilderInterfaceInstanceDefault），定义app的loading、空页面、网络错误页面
/// 也可以在单个页面，重写方法，自定义当前的loading、空页面、网络错误页面
class SilFutureBuilderWidgetDemo extends StatefulWidget {
  const SilFutureBuilderWidgetDemo({Key? key}) : super(key: key);

  @override
  State<SilFutureBuilderWidgetDemo> createState() =>
      _SilFutureBuilderWidgetDemoState();
}

class _SilFutureBuilderWidgetDemoState extends State<SilFutureBuilderWidgetDemo>
    with SilFutureBuilderInterfaceInstanceDefault {
  // 使用with关键字，可以使用SilFutureBuilderInterfaceInstanceDefault中的loading、空页面、网络错误页面实现方法，就可以统一设置，不用每个页面都进行设置了

  var _future = null;
  List _datas = [];

  @override
  void initState() {
    super.initState();
    _future = api_new_apps(); // 接口
  }

  /// 模拟网络接口
  api_new_apps() {
    return Future.delayed(Duration(milliseconds: 300), () {
      return ['微博', '微信', 'QQ'];
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SilFutureBuilderWidget(
          future: _future,
          mainWidget: (value) {
            _datas = value;
            return mainWidget();
          },
          reloadFunc: () {
            setState(() {
              _future = api_new_apps();
            });
          },
          interface: this // 如果默认的页面不符合app，可以实现接口，自定义loading、空页面、网络错误页面
          ),
    );
  }

  mainWidget() {
    return ListView.separated(
        padding: EdgeInsets.symmetric(vertical: 20),
        itemBuilder: (context, index) {
          return GestureDetector(
            onTap: () {},
            child: Container(
              height: 50,
              alignment: Alignment.center,
              child: SilText(_datas[index]),
            ),
          );
        },
        separatorBuilder: (context, index) {
          return Padding(padding: EdgeInsets.only(top: 16));
        },
        itemCount: _datas.length);
  }

  /// 单个页面，重写方法，自定义当前的网络错误页面
  @override
  Widget netErrorWidget({void Function()? reloadFunc}) {
    return SilNetErrorWidget(reloadFunc: reloadFunc, prompt: 'netErrorWidget');
  }

  /// 单个页面，重写方法，自定义当前的空页面
  @override
  Widget noDataWidget(
      {RefreshController? emptyRefreshController,
      void Function()? reloadFunc}) {
    return SilEmptyDataWidget(reloadFunc: reloadFunc);
  }
}

三、SilSmartRefresherWidget 封装刷新加载组件

/// SilSmartRefresherWidget 封装刷新加载组件
/// 在SilSmartRefresherWidget的基础上，将刷新处理加了进去，使用时可以只关心接口和ListItem
/// 使用：
/// 如果使用默认组件设置，只需要返回一个接口和列表
/// 也可以用with混合的方式，将app的loading、空页面、网络错误页面、刷新指示器header和footer、是否加载结束设置好
/// 也可以在单个页面，实现SilSmartRefresherInterface的方法，实现单个页面自定义
class SilSmartRefresherWidgetDemo extends StatefulWidget {
  const SilSmartRefresherWidgetDemo({Key? key}) : super(key: key);

  @override
  State<SilSmartRefresherWidgetDemo> createState() =>
      _SilSmartRefresherWidgetDemoState();
}

class _SilSmartRefresherWidgetDemoState extends State<SilSmartRefresherWidgetDemo>
    with SilFutureBuilderInterfaceInstanceDefault
    implements SilSmartRefresherInterface {
  List _datas = [];
  late RefreshController _refreshController;

  @override
  void initState() {
    super.initState();

    _refreshController = RefreshController(initialRefresh: false);
  }

  /// 模拟网络接口
  api_new_apps({int? page}) {
    return Future.delayed(Duration(milliseconds: 300), () {
      return ['微博', '微信', 'QQ'];
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SilSmartRefresherWidget(
        childBuild: (context, data) {
          _datas = data;
          return contentWidget(context);
        },
        loadDataFuture: ({page, manuallyRefresh}) {
          return api_new_apps(page: page);
        },
        refreshController: _refreshController,
        isShowFooterNoData: true,
        interface: this,
      ),
    );
  }

  Widget contentWidget(BuildContext context) {
    return ListView.separated(
        itemBuilder: (context, index) {
          return GestureDetector(
            onTap: () {},
            child: Container(
              height: 50,
              alignment: Alignment.center,
              child: SilText(_datas[index]),
            ),
          );
        },
        separatorBuilder: (context, index) {
          return Padding(padding: EdgeInsets.only(top: 16));
        },
        itemCount: _datas.length);
  }

  /// 单个页面，重写方法，自定义当前的网络错误页面
  @override
  Widget netErrorWidget({void Function()? reloadFunc}) {
    return SilNetErrorWidget(reloadFunc: reloadFunc, prompt: 'netErrorWidget');
  }

  /// 单个页面，重写方法，自定义当前的空页面
  @override
  Widget noDataWidget(
      {RefreshController? emptyRefreshController,
      void Function()? reloadFunc}) {
    return SilEmptyDataWidget(reloadFunc: reloadFunc);
  }

  @override
  bool noMoreData({required result, required int loadedDataNum}) {
    if (result.data == null) {
      return true;
    }
    return false;
  }

  @override
  Widget refresherFooterWidget() {
    return ClassicFooter();
  }

  @override
  Widget refresherHeaderWidget() {
    return ClassicHeader();
  }
}

Additional information

Author: Silence

Mail: silence9685@163.com