Flutter Ksir

是什么？

这是一个Flutter组件库插件，用于快速部署开发环境，由于谷歌的Material UI跟国内设计风格不一，所以参考小程序实现了showModal、showToast、showLoading、showMessage、actionSheet、 picker等组件以及提供一种能够精确还原设计搞的适配方案。

点击前往github库

安装

ksir:
    git:
      url: https://github.com/debugksir/Ksir.git
      ref: 09c5ed9

使用

import 'package:ksir/ksir.dart';
...
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    // 在入口文件初始化，其中width为设计稿宽度，默认值为750，也推荐设置750
    Ksir.init(context, width: 750);
    return ...
  }
}

组件

showLoading

• API | 属性 | 说明 | 类型 | 默认值 | | —- | —- | —- | —- | | iconType | 加载图标类型。枚举如下：BallBeatIndicator()、BallSpinFadeLoaderIndicator()、LineScaleIndicator() | Indicator | BallSpinFadeLoaderIndicator() |

• 使用案例

  MaterialButton(
  minWidth: setSize(690),
  color: Color(0xff07c160),
  onPressed: () {
    Ksir.showLoading();
    Timer(Duration(seconds: 2), () {
      Navigator.pop(context);
    });
  },
  child: Ksir.text('showLoading', color: Colors.white),
  )

showModal

• API

• 使用案例

MaterialButton(
  minWidth: setSize(690),
  color: Color(0xff07c160),
  onPressed: () {
    Ksir.showModal('确认提交吗？');
  },
  child: Ksir.text('showModal', color: Colors.white),
)

showToast

• API

• 使用案例

MaterialButton(
  minWidth: setSize(690),
  color: Color(0xff07c160),
  onPressed: () {
    Ksir.showToast('提交成功！');
  },
  child: Ksir.text('showToast success', color: Colors.white),
),
MaterialButton(
  minWidth: setSize(690),
  color: Color(0xff07c160),
  onPressed: () {
    Ksir.showToast('提交失败！', isSuccess: false);
  },
  child: Ksir.text('showToast fail', color: Colors.white),
)

showMessage

• API

• 使用案例

MaterialButton(
  minWidth: setSize(690),
  color: Color(0xff07c160),
  onPressed: () {
    Ksir.showMessage('账号不能为空！');
  },
  child: Ksir.text('showMessage', color: Colors.white),
)

actionSheet

• API

• ActionSheetType API

• 使用案例

MaterialButton(
  minWidth: setSize(690),
  color: Color(0xff07c160),
  onPressed: () {
    Ksir.actionSheet([
      ActionSheetType(title: '修改', onTap: () {
        print('修改');
      }),
      ActionSheetType(title: '删除', onTap: () {
        print('删除');
      }, color: Colors.red),
    ]);
  },
  child: Ksir.text('showAction', color: Colors.white),
)

picker

• API

• PickerType API

• 使用案例

MaterialButton(
  minWidth: setSize(690),
  color: Color(0xff07c160),
  onPressed: () {
    Ksir.picker(
      options: [PickerType(label: '北京', value: '1'), PickerType(label: '广州', value: '2'), PickerType(label: '上海', value: '3'), PickerType(label: '杭州', value: '4')], 
      title: '请选择',
      optionHeight: 80,
      optionTextStyle: TextStyle(fontSize: 14, color: Colors.blueAccent),
      defaultValue: '3',
      onChange: (index, item) {
        print('$index : $item');
      },
      onConfirm: (index, item) {
        print('$index : ${item.label} / ${item.value}');
      }
    );
  },
  child: Ksir.text('showPicker', color: Colors.white),
)

text

• API

• 使用案例

Container(
  width: setFullWidth(),
  child: Ksir.text('好好学习，天天向上！', fontSize: 48, color: Colors.black, fontWeight: 'bold', textAlign: TextAlign.right),
),

image

• API

• 使用案例

/// 图片组件使用cached_network_image插件缓存图片，节省用户请求，同时自动识别asset和network图片类型，当传入src是以http开头时判定为network类型,否则为asset类型。暂不支持file类型
Ksir.image('http://via.placeholder.com/350x150', width: 500, height: 500, fit: BoxFit.cover),

avatar

• API

• 使用案例

Ksir.avatar('http://via.placeholder.com/350x150', width: 200),

nextPage

• API

• 使用案例

Container(
  width: setSize(690),
  height: setSize(100),
  decoration: BoxDecoration(
    border: Border(bottom: BorderSide(width: setSize(1), color: Color(0xffe8e8e8)))
  ),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
      Ksir.text('下一页', fontSize: 32, color: Color(0xff666666)),
      Ksir.nextPage(onTap: () {
        Navigator.push(context, MaterialPageRoute(builder: (context) => NextPage(),));
      })
    ],
  ),
),

goback

• API

• 使用案例

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      leading: Ksir.goBack(context, color: Colors.white),
      title: Ksir.text('返回上一页', color: Colors.white),
    ),
    body: Ksir.text(demo),
  );
}

适配方案

默认以750px设计为准, 如果需要自定义，可以在初始化的时候指定， 如设计稿宽度375：Ksir.init(context, width: 375); 推荐设置750px，以下Demo以750为例。

Container(
  width: setSize(690),
  height: setSize(690),
  decoration: BoxDecoration(
    color: Colors.blueGrey,
    borderRadius: BorderRadius.circular(setSize(16))
  ),
  alignment: Alignment.center,
  child: Ksir.text(demo01, color: Colors.white),
)

更多方法如下：
设置设备上的尺寸计算设计稿的尺寸：setSize(double rpx)
根据设计稿尺寸计算设备上的尺寸：sizeSet(double xpr)
底部操作栏高度：bottomBarHeight()
每个逻辑像素的字体像素数，字体的缩放比例：textScaleFactory()
设备的像素密度： pixelRatio()
当前设备宽度 dp：screenWidthDp()
当前设备高度 dp：screenHeightDp()
当前设备宽度 px：screenWidth()
当前设备高度 px：screenHeight()
状态栏高度 dp：statusBarHeight()
设置最大宽度：setFullWidth(BuildContext context)
设置最大高度：setFullHeight(BuildContext context)