Padding
padding 组件处理容器与子元素直接的间距
class PaddingDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GridView.count(
crossAxisCount: 2,
childAspectRatio: 1.8,
children: <Widget>[
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network('https://www.itying.com/images/flutter/1.png',
fit: BoxFit.cover),
),
),
],
);
}
}
Row水平布局组件
属性 | 说明 |
---|
mainAxisAlignment | 主轴的排序方式 |
crossAxisAlignment | 次轴的排序方式 |
children | 组件子元素 |
class RowDemos extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
Expanded(child:
IconContainer(Icons.search,color: Colors.blue,size: 32.0),
flex: 1,
),
Expanded(child:
IconContainer(Icons.home,color: Colors.orange,size: 32.0),
flex: 2,
)
],
);
}
}
Column 垂直布局组件
属性 | 说明 |
---|
mainAxisAlignment | 主轴的排序方式 |
crossAxisAlignment | 次轴的排序方式 |
children | 组件子元素 |
class HomePage extends StatefulWidget {
HomePage({Key key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int countNum = 0;
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Chip(
label: Text('${this.countNum}'),
),
RaisedButton(
onPressed: (){
setState(() {
//只有有状态组件里面才有
this.countNum++;
});
},
child: Text('按钮'),
)
],
);
}
}
Expanded
可以用在Row和Column布局中
属性 | 说明 |
---|
flex | 元素站父row/column的比例 |
child | 子元素 |
class ExpandedDemos extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Container(
height: 200,
color: Colors.black,
child: Text('你好'),
),
Row(
children: <Widget>[
Expanded(
flex: 2,
child: Container(
height: 180,
child: Image.network('https://www.itying.com/images/flutter/1.png'),
)
),
Expanded(
flex: 1,
child:ListView(
children: <Widget>[
Container(
height: 90,
child:Image.network('https://www.itying.com/images/flutter/1.png'),
),
Container(
height: 90,
child:Image.network('https://www.itying.com/images/flutter/2.png'),
)
],
)
)
],
)
],
);
}
}