relative_layout 0.1.0+1

Flutter Android iOS web

RelativeLayout in Flutter,support 'toLeftOf、toRightOf、above、below',support 'alignTop、alignBottom、alignLeft、alignRight',the overflow mode support'overflow、inside'

relative_layout #

Flutter-RelativeLayout

Flutter上的相对布局RelativeLayout

Usage #

依赖:<br/> relative_layout: ^last_version

导入:<br/> import 'package:relative_layout/relative_layout.dart';

然后就可以愉快的使用RelativeLayout了。具体可用属性见Example。

要求:

  • children必须是LayoutId,并且LayoutIdid必须是RelativeId;
  • RelativeIdid作为child寻找相对关系的身份标示,其值必须唯一
  • 被依赖的child必须声明在依赖child之前。如一个child B要布局在child A的左侧,A要声明在B之前,然后B再使用toLeftOf: 'A'

Example #

1、相对关系:toLeftOf,toRightOf,above,below #

RelativeLayout(
                children: <LayoutId>[
                  LayoutId(
                    id: RelativeId('A'),
                    child: simpleContatiner(text: 'A', color: Colors.red),
                  ),
                  LayoutId(
                    id: RelativeId('B', toLeftOf: 'A'),
                    child: simpleContatiner(text: 'B', color: Colors.blue),
                  ),
                  LayoutId(
                    id: RelativeId('C', toRightOf: 'A'),
                    child: simpleContatiner(text: 'C', color: Colors.blue),
                  ),
                  LayoutId(
                    id: RelativeId('D', above: 'A'),
                    child: simpleContatiner(text: 'D', color: Colors.blue),
                  ),
                  LayoutId(
                    id: RelativeId('E', below: 'A'),
                    child: simpleContatiner(text: 'E', color: Colors.blue),
                  ),
                ],
              ),

组合使用:

 RelativeLayout(
                children: <LayoutId>[
                  LayoutId(
                    id: RelativeId('A'),
                    child: simpleContatiner(text: 'A', color: Colors.red),
                  ),
                  LayoutId(
                    id: RelativeId('B', toLeftOf: 'A',above: 'A'),
                    child: simpleContatiner(text: 'B', color: Colors.blue),
                  ),
                  LayoutId(
                    id: RelativeId('C', toLeftOf: 'B',below: 'A'),
                    child: simpleContatiner(text: 'C', color: Colors.blue),
                  ),
                  LayoutId(
                    //因为above已经指定了y轴上的位置,所以alignment只有x轴的位置会生效
                    id: RelativeId('D', above: 'A',alignment: Alignment.centerRight),
                    child: simpleContatiner(text: 'D', color: Colors.blue),
                  ),
                ],
              ),

2、轴对齐关系:alignLeft,alignRight,alignTop,alignBottom #

 RelativeLayout(
                children: <LayoutId>[
                  LayoutId(
                    id: RelativeId('A'),
                    child: simpleContatiner(text: 'A', color: Colors.red,width: 180,height: 180),
                  ),
                  LayoutId(
                    id: RelativeId('B', alignTop: 'A'),
                    child: simpleContatiner(text: 'B', color: Colors.blue),
                  ),
                  LayoutId(
                    id: RelativeId('C', alignBottom: 'A'),
                    child: simpleContatiner(text: 'C', color: Colors.blue),
                  ),
                  LayoutId(
                    id: RelativeId('D', alignLeft: 'A'),
                    child: simpleContatiner(text: 'D', color: Colors.blue),
                  ),
                  LayoutId(
                    id: RelativeId('E', alignRight: 'A'),
                    child: simpleContatiner(text: 'E', color: Colors.blue),
                  ),
                ],
              ),

组合使用:

 RelativeLayout(
                children: <LayoutId>[
                  LayoutId(
                    id: RelativeId('A'),
                    child: simpleContatiner(text: 'A', color: Colors.red,width: 180,height: 180),
                  ),
                  LayoutId(
                    id: RelativeId('B', alignTop: 'A',toLeftOf: 'A'),
                    child: simpleContatiner(text: 'B', color: Colors.blue),
                  ),
                  LayoutId(
                    //因为alignBottom已经指定了y轴上的位置,所以alignment只有x轴会生效
                    id: RelativeId('C', alignBottom: 'A',alignment: Alignment.centerRight),
                    child: simpleContatiner(text: 'C', color: Colors.blue),
                  ),
                  LayoutId(
                    id: RelativeId('D', alignLeft: 'A',alignTop: 'C',),
                    child: simpleContatiner(text: 'D', color: Colors.blue,height: 100,width: 100),
                  ),
                ],
              ),

3、溢出模式 #

 RelativeLayout(
                children: <LayoutId>[
                  LayoutId(
                    id: RelativeId('A'),
                    child: simpleContatiner(text: 'A', color: Colors.red,width: 180,height: 180),
                  ),
                  LayoutId(
                  //可以溢出父布局
                    id: RelativeId('B', above: 'A',alignment: Alignment(-0.5,0),overFlow: RelativeOverFlow.overflow),
                    child: simpleContatiner(text: 'B', color: Colors.blue,height: 200),
                  ),
                  LayoutId(
                  //不可以溢出父布局
                    id: RelativeId('C', above: 'A',alignment: Alignment(0.5,0),overFlow: RelativeOverFlow.inside),
                    child: simpleContatiner(text: 'C', color: Colors.blue,height: 200),
                  ),
                ],
              ),

(没有支持clip溢出模式(即溢出父布局的部分被裁剪),可以通过给布局嵌套一层ClipRect实现。)

simpleContatiner:

  Widget simpleContatiner({
    Color color = Colors.red,
    double width = 50,
    double height = 50,
    String text = 'A',
  }) {
    return Container(
      width: width,
      height: height,
      color: color,
      alignment: Alignment.center,
      child: Text(
        text,
        style: TextStyle(color: Colors.white),
      ),
    );
  }
3
likes
100
pub points
52%
popularity

RelativeLayout in Flutter,support 'toLeftOf、toRightOf、above、below',support 'alignTop、alignBottom、alignLeft、alignRight',the overflow mode support'overflow、inside'

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

ccy01220122@gmail.com

License

Apache 2.0 (LICENSE)

Dependencies

flutter

More

Packages that depend on relative_layout