[-Flutter趣玩篇-] 出神入化的Align

3,905 阅读4分钟

工具的价值在于使用它的人,而非工具自身。会拿笔的人很多,但绘画宗师寥寥无几。--张风捷特烈


龙少(疑惑):Align这么简单,有什么好讲的。
捷特: 你会拿笔吗?
龙少:你是在怀疑我的智商?我拿给你看:

捷特: 既然会拿笔,给我画一张。
龙少: ...,我怀疑你在水文,而且我证据确凿。
捷特: 这都被你发现了,水一页可真不容易。


1.Align的源码

捷特: 你平时怎么用Align?
龙少: 还能怎么用,用键盘敲呗。Align中有一个alignment属性,通过Alignment枚举,可以指定一个组件在容器中的相对位置,虽然挺好用,但也没什么要点,你确定能水一篇?
捷特: 你确定是枚举。
龙少: 一共就9种类型,不是枚举是什么? (进入Alignment源码)

class AlignTest extends StatelessWidget {
  AlignTest({Key key}) :super(key: key);
  
  @override
  Widget build(BuildContext context) {
    var childBox = Container(//孩子组件
      width: 40,
      height: 40,
      color: Colors.cyanAccent,
    );
    var childLayout = Align(//布局组件Align
      alignment: Alignment.center,
      child: childBox,
    );
    
    return Container(//父亲组件
      width: 110,
      height: 68,
      color: Colors.grey,
      child: childLayout,
    );
  }
}

龙少: 嗯?居然是一个类,而且那些疑似枚举的都是静态常量。
捷特: so,Alignment的能力并非仅是九种对齐方式,它是一种排布。
龙少: so... what?

class Alignment extends AlignmentGeometry {
  ...
  static const Alignment topLeft = Alignment(-1.0, -1.0);
  static const Alignment topCenter = Alignment(0.0, -1.0);
  static const Alignment topRight = Alignment(1.0, -1.0);
  static const Alignment centerLeft = Alignment(-1.0, 0.0);
  static const Alignment center = Alignment(0.0, 0.0);
  static const Alignment centerRight = Alignment(1.0, 0.0);
  static const Alignment bottomLeft = Alignment(-1.0, 1.0);
  static const Alignment bottomCenter = Alignment(0.0, 1.0);
  static const Alignment bottomRight = Alignment(1.0, 1.0);

捷特: 这样就能很容易操纵元素的位置,现在有个需求,给你一批组件,让他们安装指定的函数曲线排布,你该怎么办?
龙少: 把刀拿来!我看看是哪个不走心的提的需求...
捷特: 淡定淡定,先看如何完成sin定位组件位置。这里用一个Slider演示一下数据变化时的效果

捷特: 先准备一个小球组件,可指定大小和颜色:

class Ball extends StatelessWidget {
  Ball({Key key, this.radius=15, this.color=Colors.blue,}) :super(key: key);
  final double radius; //半径
  final Color color; //颜色

  @override
  Widget build(BuildContext context) {
    return Container(
      width: radius*2,
      height: radius*2,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: color,
      ),
    );
  }
}

龙少: 嗯?有点意思,确实挺巧妙,为什么有种想打你一顿的冲动

class SinLayout extends StatefulWidget {
  SinLayout({Key key,}) : super(key: key);
  @override
  _SinLayoutState createState() => _SinLayoutState();
}

class _SinLayoutState extends State<SinLayout> {
  var _x=0.0;//Alignment坐标系上的x坐标

  @override
  Widget build(BuildContext context) {
    var item=   Container(
      width: 300,
      height: 200,
      color: Colors.black.withAlpha(10),
      child: Align(
        child: Ball(color: Colors.orangeAccent,),
        alignment: Alignment(_x,f(_x*pi)), //<--- 根据_x联动y,确定位置
      ),
    );

    var slider=Slider(
        max: 180,
        min: -180,
        divisions:360,
        label: "${_x.toStringAsFixed(2)}π",
        value: _x*180,
        onChanged: (v) {
          setState(() {_x=v/180;});//拖动时更新横坐标
        });
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[slider, item],
    );
  }

  double f(x) {//映射函数 -- 可随意指定
    double y = sin(x);
    return y;
  }
}


现在封装一个sin图像的位置摆放组件

class SinPlace extends StatelessWidget {
  SinPlace({Key key, this.child,this.t=0}) : super(key: key);

  final Widget child;
  final double t;

  @override
  Widget build(BuildContext context) {
    return   Container(
        child:Align(
          child: child,
          alignment: Alignment(t,g(t*pi)), //<--- 根据——x联动y,确定位置
        ));
  }

  double g(t) {//映射函数 -- 可随意指定
    double y = 0.5*sin(t);
    return y;
  }
}

通过Stack进行摆放

class SinLayout extends StatelessWidget {
  SinLayout({Key key, this.items}) :super(key: key);
  
  final Map<double,Widget> items;

  @override
  Widget build(BuildContext context) => Stack(
      children: items.keys.toList().map((key)=>
        SinPlace(t: key,child: items[key],)).toList() ,
    );
}

使用items传入即可

var items=<double,Widget>{
    -0.2:CircleAvatar(backgroundImage:AssetImage("images/caver.jpeg") ,),
    -0.4:CircleAvatar(backgroundImage:AssetImage("images/honor.png") ,),
    -0.6:CircleAvatar(backgroundImage:AssetImage("images/caver.jpeg") ,),
    -0.8:CircleAvatar(backgroundImage:AssetImage("images/leaf.png") ,),
    -1:CircleAvatar(backgroundImage:AssetImage("images/caver.jpeg") ,),
    0:CircleAvatar(backgroundImage:AssetImage("images/icon_head.png") ,),
    0.2:CircleAvatar(backgroundImage:AssetImage("images/caver.jpeg") ,),
    0.4:CircleAvatar(backgroundImage:AssetImage("images/wy_200x300.jpg") ,),
    0.6:CircleAvatar(backgroundImage:AssetImage("images/caver.jpeg") ,),
    0.8:CircleAvatar(backgroundImage:AssetImage("images/icon_head.png") ,),
    1:CircleAvatar(backgroundImage:AssetImage("images/caver.jpeg") ,),
  };


也许你看出来了,其实就是一个函数而已,所以可以它还能更强大,完全可以封成个自定义函数图像排列。根据参数方程的形式来构造函数,通过f和g

typedef FunNum1=Function(double t );

class MathPlace extends StatelessWidget {
  MathPlace({Key key, this.child,this.t=0,this.f,this.g}) : super(key: key);

  final Widget child;
  final FunNum1 f;
  final FunNum1 g;
  final double t;

  @override
  Widget build(BuildContext context) {

    var result=   Container(
        child:Align(
          child: child,
          alignment: Alignment(f(t),g(t)), //<--- 根据——x联动y,确定位置
        ));
    return  result;
  }
}

class MathLayout extends StatelessWidget {
  MathLayout({Key key, this.items,this.f,this.g}) :super(key: key);
  final FunNum1 f;
  final FunNum1 g;
  final Map<double,Widget> items;

  @override
  Widget build(BuildContext context) => Stack(
    children: items.keys.toList().map((key)=>MathPlace(t: key,child: items[key],f: f,g: g,)).toList() ,
  );
}

圆形排布,小意思

Container(
    width: 350,
    height: 350,
    child: MathLayout(
            items: items,
            f: (t) => cos(t * pi),
             g: (t) => sin(t * pi),
))

椭圆排布,好说

Container(
    width: 350,
    height: 350,
    child: MathLayout(
      items: items,
      f: (t) => 0.8*sin(t * pi),
      g: (t) => 0.6*cos(t * pi),
    )),
,

龙少: 好吧,我要去小学重新学数学。(手动笑哭)


本文到此接近尾声了,如果想快速尝鲜Flutter,《Flutter七日》会是你的必备佳品;如果想细细探究它,那就跟随我的脚步,完成一次Flutter之旅。
另外本人有一个Flutter微信交流群,欢迎小伙伴加入,共同探讨Flutter的问题,本人微信号:zdl1994328,期待与你的交流与切磋。

满纸荒唐言,一把辛酸泪。都言作者痴,谁解其中味。