Flutter 学习随笔
Card
Card 是卡片组件块，内容可以由大多数类型的 Widget 构成，Card 具有圆角和阴影，这让它看起来有立体感。
属性预览：
const Card({
Key key,
this.color,//颜色
this.elevation,//设置阴影
this.shape,//设置圆角
this.borderOnForeground = true,
this.margin,//边距
this.clipBehavior,//裁剪
this.child,
this.semanticContainer = true,
}) : assert(elevation == null || elevation >= 0.0),
assert(borderOnForeground != null),
super(key: key);
| clipBehavior属性值 | 说明 |
|---|---|
| clipBehavior: Clip.none, | 不裁剪 |
| clipBehavior: Clip.hardEdge, | 裁剪但不应用抗锯齿，裁剪速度比none模式慢一点，但比其他方式快。 |
| clipBehavior: Clip.antiAlias, | 裁剪而且抗锯齿，以实现更平滑的外观。裁剪速度比antiAliasWithSaveLayer快，比hardEdge慢。 |
| clipBehavior: Clip.antiAliasWithSaveLayer, | 带有抗锯齿的剪辑，并在剪辑之后立即保存saveLayer。 |
代码示例：
var card = new SizedBox(
child: new Card(
elevation: 15.0,//设置阴影，即card在z轴的距离，数字越大阴影越重
color: Colors.grey[100],//设置颜色，数字为颜色饱和度
//设置margin边距
//margin: const EdgeInsets.all(20),//可.all进行全部设置
margin: const EdgeInsets.only(top: 8,left: 10,right: 10),//可.only进行单独设置
//设定Card的圆角
shape: RoundedRectangleBorder(
// borderRadius: BorderRadius.all(Radius.circular(20.0)), //可.all进行全部设置
borderRadius: BorderRadius.only( //可.only进行单独设置
topLeft: Radius.circular(20.0),
topRight: Radius.zero,
bottomLeft: Radius.zero,
bottomRight: Radius.circular(20.0)),
),
//设置裁剪
clipBehavior: Clip.none,//不裁剪
child: new Column(
children: [
new Container(
decoration: BoxDecoration (
color: Colors.grey[200]
),
child: new ListTile(
title: new Text('评审工作',
style: new TextStyle(fontWeight: FontWeight.w500)),
),
),
new Container(
constraints: new BoxConstraints.expand(
height:Theme.of(context).textTheme.display1.fontSize * 1.1 + 100,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
_buildButtonColumn(color, Icons.alarm_on, '待我接收'),
_buildButtonColumn(color, Icons.alarm_add, '待我审批'),
]
)
),
]
)
)
);
//封装按钮
Column _buildButtonColumn(Color color, IconData icon, String label) {
return Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(icon, color: color,size: 35),
Container(
margin: const EdgeInsets.only(top: 2),
child: Text(
label,
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w400,
color:Colors.red[500] ,
),
),
),
],
);
}
效果图：
//card的标题
ListTile(
title: Text("李四",style: TextStyle(fontSize: 28)),//主标题
subtitle: Text("CEO"),//副标题
),
Divider
Divider为分割线控件
属性预览：
const Divider({
Key key,
this.height,//控件高度，分割线在控件内居中
this.thickness,//分割线的高度
this.indent,//分割线前面空白区域
this.endIndent,//分割线后面空白区域
this.color,//分割线颜色
}) : assert(height == null || height >= 0.0),
assert(thickness == null || thickness >= 0.0),
assert(indent == null || indent >= 0.0),
assert(endIndent == null || endIndent >= 0.0),
super(key: key);
代码示例：
Divider(
height: 10,
thickness: 5,
color: Colors.red,
indent: 10,
endIndent: 20,
),
效果图：
Container
Container为容器控件，布局使用。
属性预览：
Container({
Key key,
this.alignment,//容器内，内容对齐方式
this.padding,//内边距
Color color,//颜色
Decoration decoration,//修饰容器，设置背景和边框
this.foregroundDecoration,//设置前景用（可能会遮盖child内容，一般作为半透明遮盖（蒙层）效果使用！）
double width,//宽度
double height,//高度，若不设置宽高，则Container会尽可能的小（被内容撑起来）
BoxConstraints constraints,//设置child的属性，注：double.infinity为无限大。
this.margin,//外边距
this.transform,//可以在其子组件绘制时对其应用一些矩阵变换来实现一些特效
this.child,
})
| alignment属性值 | 说明 |
|---|---|
| alignment:Alignment.center, | 容器内，内容垂直水平居中 |
| alignment:Alignment.centerLeft, | 容器内，内容垂直居中，水平左对齐 |
| alignment:Alignment.centerRight, | 容器内，内容垂直居中，水平右对齐 |
| alignment:Alignment.bottomCenter, | 容器内，内容水平居中，紧贴下层 |
| alignment:Alignment.botomLeft, | 容器内，内容水平向左，紧贴下层 |
| alignment:Alignment.bottomRight, | 容器内，内容水平向右，紧贴下层 |
| alignment:Alignment.topLeft, | 容器内，内容水平向左，紧贴上层 |
| alignment:Alignment.topCenter, | 容器内，内容水平居中，紧贴上层 |
| alignment:Alignment.topRight, | 容器内，内容水平向右，紧贴上层 |
代码示例：
new Container(
alignment:Alignment.center,
constraints: new BoxConstraints.expand(
height:Theme.of(context).textTheme.display1.fontSize * 1.1 + 100,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
_buildButtonColumn(color, Icons.alarm_on, '待我接收'),
_buildButtonColumn(color, Icons.alarm_add, '待我审批'),
]
)
),
效果图：
背景设置渐变色
代码示例：
new Container(
constraints: new BoxConstraints.expand(
height:Theme.of(context).textTheme.display1.fontSize * 1.1 + 100,
),
decoration: BoxDecoration (
color: Colors.grey[200],
gradient: LinearGradient(
//设置渐变色
colors: [Colors.blueAccent, Colors.amber, Colors.purpleAccent],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
tileMode: TileMode.mirror,
stops: [0.1, 0.5, 0.8])
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
_buildButtonColumn(color, Icons.alarm_on, '待我接收'),
_buildButtonColumn(color, Icons.alarm_add, '待我审批'),
]
)
),
效果图：
Row
Row 是一个可以沿水平方向展示它的子组件的组件，用于布局
属性预览：
Row({
Key key,
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
MainAxisSize mainAxisSize = MainAxisSize.max,
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
TextDirection textDirection,
VerticalDirection verticalDirection = VerticalDirection.down,
TextBaseline textBaseline,
List<Widget> children = const <Widget>[],
}) : super(
children: children,
key: key,
direction: Axis.horizontal,
mainAxisAlignment: mainAxisAlignment,
mainAxisSize: mainAxisSize,
crossAxisAlignment: crossAxisAlignment,
textDirection: textDirection,
verticalDirection: verticalDirection,
textBaseline: textBaseline,
);
| crossAxisAlignment属性值 | 说明 |
|---|---|
| crossAxisAlignment: CrossAxisAlignment.start | 在顶部对齐 |
| crossAxisAlignment: CrossAxisAlignment.end | 在底部对齐 |
| crossAxisAlignment: CrossAxisAlignment.center | 垂直居中 |
| crossAxisAlignment: CrossAxisAlignment.stretch | 拉伸填充满父布局 |
| crossAxisAlignment: CrossAxisAlignment.baseline | 报错（不知为什么） |
| mainAxisAlignment属性值 | 说明 |
|---|---|
| mainAxisAlignment: MainAxisAlignment.spaceEvenly, | 根据子组件数量平均分布显示，即每个子组件间隔相等 |
| mainAxisAlignment: MainAxisAlignment.start, | 靠左排列 |
| mainAxisAlignment: MainAxisAlignment.end, | 靠右排列 |
| mainAxisAlignment: MainAxisAlignment.center, | 居中排列 |
| mainAxisAlignment: MainAxisAlignment.spaceAround, | 主轴平均分，首尾到两边的距离为组件间距的一半 |
| mainAxisAlignment: MainAxisAlignment.spaceBetween, | 左右两头对齐，中间平均分布 |
代码示例：
new Container(
constraints: new BoxConstraints.expand(
height:Theme.of(context).textTheme.display1.fontSize * 1.1 + 100,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
_buildButtonColumn(color, Icons.alarm_on, '待我接收'),
_buildButtonColumn(color, Icons.alarm_add, '待我审批'),
_buildButtonColumn(color, Icons.alarm_add, '待我审批'),
]
),
),
new Container(
constraints: new BoxConstraints.expand(
height:Theme.of(context).textTheme.display1.fontSize * 1.1 + 100,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
_buildButtonColumn(color, Icons.alarm_on, '待我接收'),
_buildButtonColumn(color, Icons.alarm_add, '待我审批'),
]
)
)
效果图：
Icon
Icon为图标组件。
属性预览：
const Icon(
this.icon, {
Key key,
this.size,//图标代销
this.color,//图标颜色
this.semanticLabel,
this.textDirection,//添加文本
})
TextField
TextField为输入框组件
属性预览：
const TextField({
Key key,
this.controller,
this.focusNode,
this.decoration = const InputDecoration(),
TextInputType keyboardType,
this.textInputAction,
this.textCapitalization = TextCapitalization.none,
this.style,
this.strutStyle,
this.textAlign = TextAlign.start,
this.textAlignVertical,
this.textDirection,
this.readOnly = false,
ToolbarOptions toolbarOptions,
this.showCursor,
this.autofocus = false,
this.obscureText = false,
this.autocorrect = true,
this.enableSuggestions = true,
this.maxLines = 1,
this.minLines,
this.expands = false,
this.maxLength,
this.maxLengthEnforced = true,
this.onChanged,
this.onEditingComplete,
this.onSubmitted,
this.inputFormatters,
this.enabled,
this.cursorWidth = 2.0,
this.cursorRadius,
this.cursorColor,
this.keyboardAppearance,
this.scrollPadding = const EdgeInsets.all(20.0),
this.dragStartBehavior = DragStartBehavior.start,
this.enableInteractiveSelection = true,
this.onTap,
this.buildCounter,
this.scrollController,
this.scrollPhysics,
})
版权声明：本文为qq_38852248原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。