Flutter中AspectRatio、Card 卡片组件

1. AspectRatio 组件

AspectRatio 的作用是根据设置调整子元素 child 的宽高比。

AspectRatio 首先会在布局限制条件允许的范围内尽可能的扩展,widget 的高度是由宽度和比率决定的,类似于 BoxFit 中的 contain,按照固定比率去尽量占满区域。

如果在满足所有限制条件过后无法找到一个可行的尺寸,AspectRatio 最终将会去优先适应布局限制条件,而忽略所设置的比率。

常见属性:

1. aspectRatio 宽高比。页面最终也许不会按这个值去布局, 具体则要看综合因素,这只是一个参考值;

2. child 子组件。值的类型为Widget;

代码示例:

效果图如下:

2. Card 组件

Card 是卡片组件块,内容可以由大多数类型的 Widget 构成,Card 具有圆角和阴影,这让它看起来有立体感。

常见属性:

1. margin 外边距。类型为EdgeInsets;

2. shape 阴影效果。默认的阴影效果为圆角的长方形边;

3. child 子组件。类型为widget;

代码示例:

效果图如下:

3. Card 组件应用实例

利用Card组件实现图文列表。

效果图如下:

4. 用本地模拟数据列表实现卡片列表

模拟数据列表:

卡片列表示例:

效果图如下:

参考链接


发布者

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注