• 梦幻
  • 鲜血
  • 病毒
  • 破碎
  • 琉璃
  • 现实
  • 高楼
  • 乐园
  • 创造
  • 刺破
  • 伤害
  • 喜悦
新世界进入中

Flutter中的Warp AspectRatio Card 路由 TABBAR 侧滑 按钮

Written by Human, Not by AI

Warp组件 流式布局

(如app里的小标签)

  • spacing 元素间距离(X轴)
  • runSpacing 纵轴间距离
  • alignment WrapAlignment 元素对齐方式
class MyButton extends StatelessWidget{
  String text = "默认内容";
  MyButton(this.text);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ElevatedButton(
        onPressed: (){
        },
        child: Text(this.text)
    );
  }
}

class Home extends StatelessWidget {

@override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      padding: EdgeInsets.fromLTRB(8, 10, 8, 10),
      child:Wrap(
        spacing: 10,
        runSpacing: 5,
        children: [
          MyButton("女装"),
          MyButton("女装"),
          MyButton("女装"),
          MyButton("女装11"),
          MyButton("女装"),
          MyButton("女装"),
          MyButton("女装2222"),
          MyButton("女装"),
          MyButton("女装111111"),
          MyButton("女装"),
          MyButton("女装"),
        ],
      ),
    );

  }


}

AspectRatio

  • aspectRatio 配置宽高比 eg:2.0/1.0

Example


class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return AspectRatio(aspectRatio: 2/1,
    child:Container(
      color: Colors.red,
    ),
    );
  }
}
//占满全宽 高度为宽度的一半

Card组件