FlutterUI,轻便而高效的书写UI。

V0.4.0 文档

能有效减少20%到40%的UI代码行数~!

后续会继续开发更新。欢迎加群提出需求和交流:829733587

特性

  • 链式调用
  • 简化代码
  • 高可读性
  • 便于维护

安装

dependencies:
  the_flutter_ui: ^0.4.1

示例

Row(children: [
    Text("").color(Colors.black12).fontSize(13),
    Image(image: AssetImage("images/arrow.webp")).coverMode().size(width: 16, height: 24),
    const Spacer(),
    Text("").color(Colors.black12).fontSize(13),
]).paddingSymmetric(horizontal: 16, vertical: 10)

布局

  • padding
    1. paddingAll
    2. paddingSymmetric(double horizontal,double vertical)
    3. paddingLeft
    4. paddingRight
    5. paddingTop
    6. paddingBottom
    7. padding
  • margin
    1. marginAll
    2. 同上
  • flexible
  • aspectRatio
  • expanded
  • positioned 配合stack定位
尺寸
  • size
  • height
  • width
  • constraints 约束
    1. maxWidth
    2. maxHeight
    3. minWidth
    4. minHeight
    5. constraints

列表

  • inList
  • inSliverList
  • SliverLazyColumn

变换

  • translate(double dx, double dy)
  • rotate(double angle)
  • scale(double scale)

颜色

  • backgroundColor
  • backgroundColorInt

效果

  • border 边框
  • roundedRect 圆角
    1. roundedRect
    2. roundedRectVertical
    3. roundedRectHorizontal
  • blur 毛玻璃
    1. blur 毛玻璃
    2. blurExpanded 模糊+expanded

功能

  • action 点击等操作
  • onClick
  • onDoubleClick
  • onLongPress

功能

  • hideSoftInput 隐藏软键盘

组件

  • RefreshLayout 上拉下拉 刷新容器

  • BottomFloatingActionButtonLocation fab控件 底部定位

  • CoverCacheImage(imageUrl,{placeholder}) 缓存、Cover模式的image

  • GradientTabIndicator 渐变色tab指示器

  • Button

    1. RRectButton 圆角图片
    2. RRectOutlinedButton 圆角线框图片
  • Swiper 轮播器 (三层:内容层、蒙版层、指示器层)

官方组件扩展

Text

  • color
  • colorInt
  • fontSize
  • fontFamily
  • fontWeight
  • bold
  • italic
  • strikethrough
  • underLine
  • overLine
  • letterSpacing
  • wordSpacing
  • lineSpacing
  • lineLimit
  • singleLine
  • textAlignment

CircleAvatar

  • border 边框

Image

  • coverMode
  • containMode
  • size
  • antialias 抗锯齿

TextField

  • color
  • colorInt
  • fontSize
  • fontFamily
  • fontWeight
  • bold
  • italic
  • strikethrough
  • underLine
  • overLine
  • letterSpacing
  • wordSpacing
  • lineSpacing
  • lineLimit
  • noLineLimit
  • singleLine
  • textAlignment
  • hint
  • hintStyle
  • hintWeight
  • hintColor
  • hintSize
  • hintFamily
  • border
  • noBorder

TODO

  • 网络状态、数据状态容器
  • 其他

Additional information

TODO: Tell users more about the package: where to find more information, how to contribute to the package, how to file issues, what response they can expect from the package authors, and more.