Flutter组件学习(AspectRatio、Card、按钮组件、Wrap、有状态组件)

1.AspectRatio

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

AspectRatio首先会在布局限制条件允许的范围内尽可能的扩展,widget的高度是由宽度和比率决定的,类似于BoxFit中的contain,按照固定比率去尽量占满区域。如果在满足所有限制条件过后无法找到一个可行的尺寸,

AspectRatio最终将会去优先适应布局限制条件,而忽略所设置的比率。

2.Card

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

属性:

 

CircleAvatar实现一个圆形图片:

基本上,CircleAvatar 不提供设置边框的属性,但是,可以将其包裹在具有更大半径和不同背景颜色的不同 CircleAvatar 中,以创建类似于边框的内容。

3.按钮组件

属性:

参数:

 

修改按钮的宽度高度:在外层加SideBox或者Container修改宽度或高度

修改背景颜色:backgroundcolor:Materialstateproperty.a11(Colors .blue)

修改字体颜色:foregroundColor: Materia1stateproperty.a11(Colors .white)

自适应按钮外层加Expanded组件

圆角按钮:

shape: MaterialstateProperty.all( RoundedRectangleBorder( borderRadius:BorderRadius.circular(20))),也可以用Container组件实现

4.Wrap组件

应用场景:搜索页

Wrap可以实现流布局,单行的Wrap跟Row表现几乎一致,单列的Wrap则跟Column表现几乎一致。但Row与Column都是单行单列的,Wrap则突破了这个限制,mainAxis上空间不足时,则向crossAxis上去扩展显示。

属性:

 

5.有状态组件

在Flutter中自定义组件其实就是一个类,这个类需要继承StatelessWidget/StatefulWidget.

statelessWidget是无状态组件,状态不可变的

widgetstatefulwidget是有状态组件,持有的状态可能在widget生命周期改变

通俗的讲: 如果我们想改变页面中的数据的话这个时候就需要用到Statefulwidget

Statefulwidget​改变数据必须使用setState

猜你喜欢

转载自blog.csdn.net/m0_73533910/article/details/131430858