Code前端首页关于Code前端联系我们

Flutter布局参考手册:行和列

terry 2年前 (2023-09-23) 阅读数 63 #移动小程序

行和列

MainAxisAlignment

Flutter 布局参考手册:Row 和 ColumnFlutter 布局参考手册:Row 和 Column
Row /*或 Column*/( 
  mainAxisAlignment: MainAxisAlignment.start,
  children: <Widget>[
    Icon(Icons.star, size: 50),
    Icon(Icons.star, size: 50),
    Icon(Icons.star, size: 50),
  ],
),
复制代码

Flutter 布局参考手册:Row 和 ColumnFlutter 布局参考手册:Row 和 Column
Row /*或 Column*/( 
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Icon(Icons.star, size: 50),
    Icon(Icons.star, size: 50),
    Icon(Icons.star, size: 50),
  ],
),
复制代码

Flutter 布局参考手册:Row 和 ColumnFlutter 布局参考手册:Row 和 Column
Row /*或 Column*/( 
  mainAxisAlignment: MainAxisAlignment.end,
  children: <Widget>[
    Icon(Icons.star, size: 50),
    Icon(Icons.star, size: 50),
    Icon(Icons.star, size: 50),
  ],
),
复制代码

Flutter 布局参考手册:Row 和 ColumnFlutter 布局参考手册:Row 和 Column
Row /*或 Column*/( 
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
    Icon(Icons.star, size: 50),
    Icon(Icons.star, size: 50),
    Icon(Icons.star, size: 50),
  ],
),
复制代码

Flutter 布局参考手册:Row 和 ColumnFlutter 布局参考手册:Row 和 Column
Row /*或 Column*/( 
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: <Widget>[
    Icon(Icons.star, size: 50),
    Icon(Icons.star, size: 50),
    Icon(Icons.star, size: 50),
  ],
),
复制代码

Flutter 布局参考手册:Row 和 ColumnFlutter 布局参考手册:Row 和 Column
Row /*或 Column*/( 
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: <Widget>[
    Icon(Icons.star, size: 50),
    Icon(Icons.star, size: 50),
    Icon(Icons.star, size: 50),
  ],
),
复制代码

Flutter 布局参考手册:Row 和 Column

如果你想要不同字符的基线对齐,你应该使用CrossAxis♼♼.baseline。 XCrossaxissalignmentFlutter 布局参考手册:Row 和 ColumnFlutter 布局参考手册:Row 和 Column

Row /*或 Column*/( 
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    Icon(Icons.star, size: 50),
    Icon(Icons.star, size: 200),
    Icon(Icons.star, size: 50),
  ],
),
复制代码

Flutter 布局参考手册:Row 和 ColumnFlutter 布局参考手册:Row 和 Column
Row /*或 Column*/( 
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    Icon(Icons.star, size: 50),
    Icon(Icons.star, size: 200),
    Icon(Icons.star, size: 50),
  ],
),
复制代码

Flutter 布局参考手册:Row 和 ColumnFlutter 布局参考手册:Row 和 Column
Row /*或 Column*/( 
  crossAxisAlignment: CrossAxisAlignment.end,
  children: <Widget>[
    Icon(Icons.star, size: 50),
    Icon(Icons.star, size: 200),
    Icon(Icons.star, size: 50),
  ],
),
复制代码

Flutter 布局参考手册:Row 和 ColumnFlutter 布局参考手册:Row 和 Column
Row /*或 Column*/( 
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: <Widget>[
    Icon(Icons.star, size: 50),
    Icon(Icons.star, size: 200),
    Icon(Icons.star, size: 50),
  ],
),
复制代码

mainaxissize

Flutter 布局参考手册:Row 和 ColumnFlutter 布局参考手册:Row 和 Column
Row /*或 Column*/( 
  mainAxisSize: MainAxisSize.max,
  children: <Widget>[
    Icon(Icons.star, size: 50),
    Icon(Icons.star, size: 50),
    Icon(Icons.star, size: 50),
  ],
),
复制代码

Flutter 布局参考手册:Row 和 ColumnFlutter 布局参考手册:Row 和 Column
Row /*或 Column*/( 
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[
    Icon(Icons.star, size: 50),
    Icon(Icons.star, size: 50),
    Icon(Icons.star, size: 50),
  ],
),

作者:Yuqi
链接:https://juejin.im/post/5CFE0D136FB9A07EFC497d7D♽来源:掘金属于Putz。如需商业转载,请联系作者授权。非商业转载请来源。

版权声明

本文仅代表作者观点,不代表Code前端网立场。
本文系作者Code前端网发表,如需转载,请注明页面地址。

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

热门