常见 Widget
最后更新于：2022-04-02 02:16:08
[TOC]
## 布局
### Container
类似于div , 可以添加padding、margin、border、background color、 boxShadow、通常用于装饰其他Widget
```
key Container唯一标识符，用于查找更新。
alignment 控制child的对齐方式，如果container或者container父节点尺寸大于child的尺寸，这个属性设置会起作用，有很多种对齐方式。
padding decoration内部的空白区域，如果有child的话，child位于padding内部。padding与margin的不同之处在于，padding是包含在content内，而margin则是外部边界，设置点击事件的话，padding区域会响应，而margin区域不会响应。
color 用来设置container背景色，如果foregroundDecoration设置的话，可能会遮盖color效果。
decoration 绘制在child后面的装饰，设置了decoration的话，就不能设置color属性，否则会报错，此时应该在decoration中进行颜色的设置。
foregroundDecoration 绘制在child前面的装饰。
width container的宽度，设置为double.infinity可以强制在宽度上撑满，不设置，则根据child和父节点两者一起布局。
height container的高度，设置为double.infinity可以强制在高度上撑满。
constraints 添加到child上额外的约束条件。
margin 围绕在decoration和child之外的空白区域，不属于内容区域。
transform 设置container的变换矩阵，类型为Matrix4。
child container中的内容widget。
```
```
child: new Container(
padding: const EdgeInsets.all(10.0),
width: 10.0,
height: 10.0,
/*装饰*/
decoration: new BoxDecoration(
border:Border.all(width:12.0,color:Colors.red), //border width:边宽 color:颜色
borderRadius: BorderRadius.all(const Radius.circular(10.0)), // border圆角
boxShadow: [ // 阴影
new BoxShadow(
color: Color(0X2A3B2C),
offset: Offset(0, 30),
blurRadius: 80,
),
]
),
child: new Column(
),
```
### Row、Column
其实就是flex布局中的flex-direction
一般 配合 `Container > Column > Row`
```
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Material(
child: new Container(
child: new Column(
children: [
new Row(
children: [
new Text("hello"),
new Text("word"),
],
),
new Row(
children: [
new Text("hello1"),
new Text("word2"),
],
)
],
),
),
);
}
}
```
### GridView web中display：grid
```
new GridView.count(
primary: false,
padding: const EdgeInsets.all(20.0),
crossAxisSpacing: 10.0,
crossAxisCount: 3,
children: [
const Text('He\'d have you all unravel at the'),
const Text('Heed not the rabble'),
const Text('Sound of screams but the'),
const Text('Who scream'),
const Text('Revolution is coming...'),
const Text('Revolution, they...'),
],
)
```
### ListView
```
child: CustomScrollView(
shrinkWrap: true,
slivers: [
SliverPadding(
padding: const EdgeInsets.all(20.0),
sliver: SliverList(
delegate: SliverChildListDelegate(
[
const Text('I\'m dedicating every day to you'),
const Text('Domestic life was never quite my style'),
const Text('When you smile, you knock me out, I fall apart'),
const Text('And I thought I was so smart'),
],
),
),
),
],
)
```
### Card 卡片效果
```
return Center(
child: Card(
child: InkWell(
splashColor: Colors.red.withAlpha(30),//鼠标按压时候的颜色
onTap: () {
print('Card tapped.'); // 点击操作
},
onDoubleTap: () {
print('Card tapped2.'); // 点击操作
},
child: Container(
width: 300,
height: 100,
child: Text('A card that can be tapped1'),
),
),
),
);
```
### Expanded
它会填充尚未被其他子项占用的的剩余可用空间。Expanded可以拥有多个children。然后使用flex参数来确定他们占用剩余空间的比例。更多细节可以参看：flutter控件Flexible和 Expanded的区别
### FittedBox 缩放和位置调整
```
new Container(
padding: const EdgeInsets.only(top: 60.0),
color: Colors.amberAccent,
width: 300.0,
height: 300.0,
child: new FittedBox(
fit: BoxFit.contain,
// child 缩放
alignment: Alignment.bottomLeft,
// child 位置
child: new Container(
color: Colors.red,
child: new Text("FittedBox"),
),
),
);
```
';