fule_view 0.2.0

Flutter Android iOS web

A simple container widget that allows you to listen to onTap events.

fule_view #

Pub Version GitHub

一个简单的视图容器组件,它允许你监听onTap、onDoubleTap、onLongTap事件。

开始 #

安装 #

该项目还在探索阶段,对外接口可能会存在较大变化,请选择好使用的版本。

在pubspec.yaml中添加依赖包

使用相对稳定的版本
fule_text: '>=0.2.0 <0.3.0'
或始终使用最新版本
fule_text: '^0.2.0'

获取依赖包

$ flutter pub get

引入 #

import 'package:fule_view/fule_view.dart';

上面演示的源码 #

import 'package:flutter/material.dart';
import 'package:fule_view/fule_view.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  MyApp({Key key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String msg = '在Stack布局中,会正好为子组件的大小';
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('FuleView'),
        ),
        body: ListView(
          children: <Widget>[
            FuleView(
              child: Text('你好 我是最简单的FuleView'),
            ),
            FuleView(
              backgroundColor: Colors.grey[500],
              margin: [10],
              child: Text('margin和padding的类型为 List<double>'),
            ),
            FuleView(
              margin: [15, 10],
              padding: [0, 10, 15],
              backgroundColor: Colors.yellow,
              child: Text('顺序为上右下左,就像CSS里那样'),
            ),
            FuleView(
              child: Text('可以快速地做出按钮效果👇'),
            ),
            Stack(
              children: <Widget>[
                FuleView(
                  backgroundColor: Colors.greenAccent,
                  margin: [5],
                  padding: [10],
                  borderRadiusWidth: 20,
                  boxShadowColor: Colors.green[100],
                  boxShadowBlurRadius: 4,
                  boxShadowSpreadRadius: 1,
                  child: Text(msg),
                  onTap: () {
                    print('onTap');
                    setState(() {
                      msg = '现在只支持监听onTap';
                    });
                  },
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

参数 #

  • margin 和 padding 类型为List<double>,接收1-4个参数,顺序为上右下左
  • 使用 border 后, borderWidth 、 borderColor 、 borderStyle 会无效
  • 使用 borderRadius 后, borderRadiusWidth 会无效
属性类型默认值必填说明组件版本
widthdouble-宽度0.2.0
heightdouble-高度0.2.0
marginList<double>[0]外边距0.2.0
paddingList<double>[0]内边距0.2.0
childWidget-子组件0.2.0
backgroundColorColorColors.transparent背景颜色0.2.0
onTapVoidCallback-点击事件0.2.0
onDoubleTapVoidCallback-双击事件0.2.0
onLongPressVoidCallback-长按事件0.2.0
borderBorder-边框自定义设置0.2.0
borderWidthdouble0边框宽度0.2.0
borderColorColorColors.black边框颜色0.2.0
borderStyleBorderStyle-边框样式0.2.0
borderRadiusBorderRadius-圆角自定义设置0.2.0
borderRadiusWidthdouble0圆角半径0.2.0
boxShadowColorColorColors.transparent阴影颜色0.2.0
boxShadowBlurRadiusdouble0切换回调函数0.2.0
boxShadowSpreadRadiusdouble0切换回调函数0.2.0

TODO #

  • [x] 实现更多种事件监听
  • [ ] 实现点击的颜色变化效果
0
likes
90
pub points
0%
popularity

Publisher

fule.tech

A simple container widget that allows you to listen to onTap events.

Repository (GitHub)
View/report issues

Documentation

API reference

License

BSD (LICENSE)

Dependencies

flutter

More

Packages that depend on fule_view