Flutter - 基础Widget，android简单小项目实例

child: Row(
mainAxisSize: MainAxisSize.min, // 默认是max，占满父Widget；min是包裹内容
children: [
Icon(Icons.favorite, color: Colors.red), // 图标
Text(“喜欢作者”), // 文字
],
),
onPressed: () => print(“自定义Button”), // onPressed必传，否则样式可能会出问题
)
],
);
}
}

2、定制 Button

• 默认间隔 : 默认情况下 Button 上下有一定有间隔，可以指定 materialTapTargetSize 来修改
• MaterialTapTargetSize.padded：(默认值) 当按钮宽(或高)不足 48px 时，就把宽(或高)扩展到 48px
• MaterialTapTargetSize.shrinkWrap：紧缩包裹，可以去除上下的间隔
• 最小宽度 : ButtonTheme(也是个 Widget，包裹 Button) 或 minWidth(Button 的一个属性)
• 内间距 : 修改 padding 属性值

class ButtonExtensionDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: [
/// 1. 默认情况下Button上下有一定有间隔
/// MaterialTapTargetSize.padded：当按钮宽(或高)不足48px时，就把宽(或高)扩展到48px。
/// MaterialTapTargetSize.shrinkWrap：紧缩包裹，可以去除上下的间隔。
FlatButton(
color: Colors.red,
child: Text(“Flat Button1”),
textColor: Colors.white,
onPressed: () {},
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
),
FlatButton(
color: Colors.red,
child: Text(“Flat Button2”),
textColor: Colors.white,
onPressed: () {},
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
),

/// 2. 修改按钮的最小宽度：ButtonTheme
FlatButton(
minWidth: 30,
height: 30,
color: Colors.red,
child: Text(""),
onPressed: () {},
),
ButtonTheme(
minWidth: 30,
height: 30,
child: FlatButton(
color: Colors.red,
child: Text(""),
onPressed: () {},
),
),

/// 3. 修改按钮的内间距
FlatButton(
padding: EdgeInsets.all(0),
// 只能去除左右内间距，上下内间距可以指定一个固定height解决
color: Colors.red,
child: Text(“Float Button3”),
textColor: Colors.white,
onPressed: () {},
),
],
);
}
}

三、图片 Widget

Image 控件需要一个必传参数 ImageProvider image，常见子类如下：

• NetworkImage : 用于加载网络图片
• 简单写法 : Image.network('http://lqr.com/FSA_QR.png')
• AssetImage : 用于加载 app 包内图片
• 简单写法 : Image.asset('assets/images/FSA_QR.png')

1、NetworkImage

• 常见属性:
• fit : 图片填充方式
• BoxFit.fill : 拉伸
• BoxFit.contain : 内容缩放至最长的一边贴边
• BoxFit.cover : 内容缩放至最短的一边贴边
• BoxFit.fitWidth : 宽度一定，高度自适应
• BoxFit.fitHeight : 高度一定，宽度自适应
• alignment :
• Alignment.bottomCenter : 底部居中
• Alignment.center : 居中
• Alignment(x, y) : 左上角是(-1, -1)，右下角是(1, 1)
• color : color 不是背景色，而是用于图像混入的颜色，配合 colorBlendMode 使用
• repeat : 重复模式，比如纵向重复 ImageRepeat.repeatY

class ImageDemo01 extends StatelessWidget {

@override
Widget build(Bu