基础组件
文本组件
Text
用于显示简单样式文本，包含一些控制样式属性
Text(
"Text",
maxLines: 1,
overflow: TextOverflow.ellipsis, // 超出部分...
style: TextStyle(
fontSize: 12, color: Color(0xFF333333), fontWeight: FontWeight.bold),
textAlign: TextAlign.center,
)
按钮与手势组件
IconButton
IconButton是一个可点击的Icon，不包括文字
IconButton(
icon: Icon(Icons.thumb_up),
onPressed: () {},
)
RaisedButton
默认灰色的带阴影的按钮
RaisedButton(
child: Text("Text"),
onPressed: () {
print("Text");
})
带图标的按钮
RaisedButton.icon(
onPressed: () {
print("Text");
},
icon: Icon(Icons.send),
label: Text("Text"))
手势组件
GestureDetector
GestureDetector(
child: Text("Text"),
onTapUp: () {
print("onTapUp");
},
onTapDown: () {
print("onTapDown");
},
onTapCancel: () {
print("onTapCancel");
},
onTap: () {
print("onTap");
},
onDoubleTap: () {
print("onDoubleTap");
},
onLongPress: () {
print("onLongPress");
},
)
图片组件
Image
Widget image;
if (this.imgUrl.isEmpty) {
image = Image.asset(
"placeholderPath",
height: 75,
width: 124,
alignment: Alignment.center,
repeat: ImageRepeat.noRepeat,
);
} else {
image = FadeInImage.assetNetwork(
fit: BoxFit.fill,
placeholder: "placeholderPath",
image: "http://xxxxx.png",
height: 75,
width: 124,
);
}
return image;
单选框和复选框
Checkbox
Checkbox(
value: isSelected,
activeColor: Colors.red,
onChanged: (value) {
print(value);
},
)
单选开关
Switch(
value: isSelected,
activeColor: Colors.red,
onChanged: (value){
print(value);
},)
裁剪组件
剪裁处理组件
Clip的相关组件：
ClipOval：圆形裁剪
ClipRRect：圆角矩形裁剪
ClipRect：矩形裁剪
ClipPath：路径裁剪
ClipOval(
child: SizeBox(
width: 100, height: 100, child: Image.network("http://xxxxx.png")),
)
隐藏与透明组件
opacity
透明度组件
Opacity(
opacity: 0.5,
child: Text("Text"),
)
Visibility
控制子组件是否可见的组件
Visibility(
visible: false,// 子组件是否可见，默认true
child: Text("Text"),// 子组件
replacement: Text("data"),// 不可见时显示的组件（当maintainState=false）
maintainState: true,//不可见时是否维持状态，默认为false
)
效果组件
InkWell
点击时有阴影效果
InkWell(
child: Text("Text"),
onTap: () {
print("Text");
},
)
容器类组件
脚手架
int _selectedIndex = 1;
@override
Widget build(BuildContext context) {
return Scaffold(// 脚手架
appBar: AppBar(// 导航栏
title: Text("Text"),
actions: [
IconButton(
// 导航栏右侧菜单
icon: Icon(Icons.share),
onPressed: () {
print("share");
})
],
),
bottomNavigationBar: BottomNavigationBar(// 底部导航栏
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
),
BottomNavigationBarItem(
icon: Icon(Icons.help_center),
),
],
currentIndex: _selectedIndex,
fixedColor: Colors.lightBlue,
onTap: (index) {
print("selected: $index");
setState(() {
_selectedIndex = index;
});
},
),
body: IndexedStack(// 可以在一个组件上放置另一个组件，并且同时只显示一个组件
index: _selectedIndex,
children: [
HomeScreen(),
HelpCenterScreen()
],
),
);
}
其他容器
Container容器
是一个组合类的容器组件，不参与最终的渲染
Container(
color: Colors.white, // 背景色
decoration: BoxDecoration(color: Color(0xFFFFFFFF)), // 背景装饰（与color不能共存，同时只能有一个）
width: 100,// 容器的宽度
height: 100,// 容器的高度
margin: EdgeInsets.only(left: 10, top: 10),
padding: EdgeInsets.all(10),
child: Text("Text"),
)
SizeBox装饰类容器
可以设置具体尺寸的控件，child不为null时，如果设置宽高，则强制显示宽高，如果没有设置，则自适应；如果child为null时，可当做间隔使用
SizedBox(
height: 16,
child: Text("Text"),
)
DecoratedBox装饰类容器
可以在其子组件绘制前（或者绘制后）绘制一些装饰，如背景、边框、渐变等
DecoratedBox(
decoration: BoxDecoration(
color: Colors.white,// 背景色
borderRadius: BorderRadius.all(Radius.circular(2.0)),// 圆角
border: Border.all(color: Colors.pink, width: 1),// 边框
gradient: LinearGradient(colors: [Colors.red, Colors.orange[700]]),// 渐变
boxShadow: [// 阴影
BoxShadow(
color: Colors.black12, offset: Offset(5.0, 5.0), blurRadius: 4.0)
],
),
child: Text("Text"),
)
SafeArea安全区域
留出刘海和底部的安全区域，很好的解决刘海屏兼容问题
SafeArea(child: Text("Text"))
布局组件
线性布局
row
水平方向排布组件，不会自动换行
Row(
mainAxisAlignment: MainAxisAlignment.start,// 主轴对齐方式
crossAxisAlignment: CrossAxisAlignment.start,// 交叉轴对齐方式
children: [
Text("Text1"),
Text("Text2"),
Text("Text3"),
Text("Text4"),
],
)
column
垂直方向排布组件，不会自动换行
Column(
children: [
Text("Text1"),
Text("Text2"),
Text("Text3"),
Text("Text4"),
],
)
Expanded
可以使Row、Column、Flex等，子组件在其主轴上展开并填充可用空间，撑开父组件。必须使用在Row、Column、Flex等
Column(
children: [
Text("Text1"),
Text("Text2"),
Expanded(
child: Text("Expanded"),
),
Text("Text3"),
Text("Text4"),
],
)
弹性布局
Flex
如h5当中的弹性盒子布局，Row和Column都继承自Flex，参数也基本一致所以可以使用Row和Column来代替Flex
Flex(
direction: Axis.horizontal,
children: <Widget>[
Text("Text1"),
Text("Text2"),
Text("Text3"),
Text("Text4"),
],
)
流式布局
Wrap、Flow
Wrap和Row类似，如果一行控件不够会自动换行
Flow和Column类似，如果一列控件不够会自动换行
Wrap(
spacing: 8.0, // 主轴（水平）方向间距
runSpacing: 8.0, // 纵轴（垂直）方向间距
alignment: WrapAlignment.center, // 沿主轴方向居中
children: <Widget>[
Text("Text1"),
Text("Text2"),
Text("Text3"),
Text("Text4"),
],
)
层叠布局
Stack、positioned
类似绝对定位，往往与Positioned联合使用，子组件可以根据父容器四个角的位置来确定自身的位置。绝对定位允许子组件堆叠起来（按照代码中声明的顺序）。
// 通过ConstrainedBox来确保Stack占满屏幕
ConstrainedBox(
constraints: BoxConstraints.expand(),
child: Stack(
alignment: Alignment.center, // 指定未定位或部分定位widget的对齐方式
fit: StackFit.expand, // 未定位widget占满Stack整个空间
children: <Widget>[
Container(
child: Text("Container"), style: TextStyle(color: Colors.white)
color: Colors.red,),
Positioned(
left: 18.0,
child: Text("left"),
),
Positioned(
top: 18.0,
child: Text("top"),
)
],
),
)
相对定位
Align
Align组件可以调整子组件的位置，并且可以根据子组件的宽高来确定自身的宽高
Container(
height: 120.0,
width: 120.0,
color: Colors.blue,
child: Align(
alignment: Alignment.topRight,
child: Text("Text"),
),
)
可滚动组件
ListView
ListView是最常用的可滚动组件之一，它可以沿一个方向线性排布所有子组件，并且它也支持基于Sliver的延迟构建模型
ListView(
scrollDirection: Axis.vertical,
shrinkWrap: true,
padding: const EdgeInsets.all(20.0),
children: <Widget>[// 使用children只适用于组件较少的情况
const Text("Text1"),
const Text("Text2"),
const Text("Text3"),
const Text("Text4"),
const Text("Text5"),
],
)
子组件较多时使用ListView.builder
ListView.builder(
itemCount: 100,
itemExtent: 50.0, // 强制高度为50.0
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text("$index"),
);
})
GridView
GridView可以构建一个二维网格列表
GridView(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3, childAspectRatio: 1.0),
children: [
Icon(Icons.ac_unit),
Icon(Icons.airport_shuttle),
Icon(Icons.all_inclusive),
Icon(Icons.beach_access),
Icon(Icons.cake),
Icon(Icons.free_breakfast)
])
网友评论