在编写几个Flutter
项目后,发现Flutter
的强大之处在于业务中所有用到的控件以及场景都有对应的处理方案;而Dart
语言也与Java
、Kotlin
类似,所以对 Android
开发者来说门槛非常低;特意记录一下常用的控件及其使用:
StatelessWidget 与 StatefulWidget
StatelessWidget
不需要额外的创建State
StatefulWidget
创建State
类,并可以在其中保存一些状态
Padding
padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top)
padding: EdgeInsets.all()
padding: :EdgeInsets.symmetric()
only
可以单独设置每个方向的内边距
SizedBox
SizedBox(width:10, height:10)
Column
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children:
)
类似于LinearLayout
中的orientation
设置为vertical
,mainAxisAlignment
表示竖向的一个对齐方式,crossAxisAlignment
表示横向的对齐方式
Row
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children:
)
与Column
相反,主轴是横向,对齐方式类似,crossAxisAlignment
表示竖向的对齐方式
Container
类似 SizedBox
,一个容器,但是主要功能是有一个decoration
—— 装饰器,作用是绘制背景,或者使用item
中的阴影
Container(
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(16.0),),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.6),
offset: const Offset(4, 4),
blurRadius: 16,
),
],
),
Stack
栈,先入后出,类似于Android
上的FrameLayout
Positioned
通常配合Stack
使用,固定显示在某一个位置
Expanded
配合多child
使用,会填充剩余的空间
Image
Image 功能强大,使用不同的方法可以加载不同来源的图片
Image.asset
Image.file
Image.network
Image.memory
看到这些方法,突然觉得Flutter
太香了,而且Image
可以配置clip
等裁剪出不同形状的图片,无论是圆形还是五角星都不在话下,然而Android
要实现不规则的形状,可是要下不少功夫的。
ListView
名字和Android
的一模一样,但是用法却比Android
的简单很多:
ListView.builder(
itemCount: hotelList.length,
padding: const EdgeInsets.only(top: 8),
scrollDirection: Axis.vertical,
itemBuilder: (BuildContext context, int index) {
}
主要就是itemCount
与itemBuilder
,其余就是配置样式,itemBuilder
需要返回一个widget
,当然了,每个ListView
都有其对应的item
,在里面的方法中编写widget
即可
GridView
与ListView
类似,但是需要有一个delegate
类,作用是设置有多少列,每一列之间的间距是多少
GridView(
padding: const EdgeInsets.only(top: 0, left: 12, right: 12),
physics: const BouncingScrollPhysics(),
scrollDirection: Axis.vertical,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: multiple ? 2 : 1,
mainAxisSpacing: 12.0,
crossAxisSpacing: 12.0,
childAspectRatio: 1.5,
),
children:
GridView
没有build
,children
表示所有的子view
TextFiled
最常用的控件之一,有非常多的样式,Flutter
中通常是使用装饰器来处理控件的,如背景使用BoxDecoration
, TextFiled
使用InputDecoration
; 使用如下
child: TextFormField(
style: const TextStyle(
fontFamily: "WorkSans",
fontWeight: FontWeight.bold,
fontSize: 16,
color: DesignCourseAppTheme.nearlyBlue,
),
keyboardType: TextInputType.text,
decoration: InputDecoration(
labelText: "Search for course",
border: InputBorder.none,
helperStyle: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16,
color: HexColor("#B9BABC"),
),
labelStyle: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 16,
letterSpacing: 0.2,
color: HexColor("#B9BABC"),
),
),
onEditingComplete: () {},
),