两行三列布局:效果图如下
实现方式:
采用Row和Column
因为两行的布局是一样的,所以我们可以把相同的部分用函数封装,传对应的参数就行。
代码如下:
import 'package:flutter/material.dart';
class IndexPage extends StatelessWidget {
Widget _centerSection(String img,String text){
return Container(
child: Row(
children: [
Container(
width: 100.0,
height: 60.0,
decoration: BoxDecoration(
image: new DecorationImage(
alignment: Alignment.centerRight,
image:new ExactAssetImage(img),
fit: BoxFit.cover//避免图片尺寸不一样
),
),
),
Container(
alignment: Alignment.centerLeft,
child: Text(text,
style: TextStyle(
color:Color(0xff2c2c2c),
fontSize: 14.0,
fontWeight: FontWeight.bold,
),
)
)],
)
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('甜宠软妹'),
backgroundColor: Colors.pinkAccent,
centerTitle: true,
),
body: Container(
padding: EdgeInsets.all(20.0),
child: Column(
children: <Widget>[
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
_centerSection('images/beauty1.png','美少女1号'),
Container(
width: 0.5,
height: 40.0,
color: Colors.grey,
),
_centerSection('images/beauty2.png','美少女2号')
]
),
),
Padding(padding: EdgeInsets.only(top: 10.0)),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
_centerSection('images/beauty1.png','美少女1号'),
Container(
width: 0.5,
height: 40.0,
color: Colors.grey,
),
_centerSection('images/beauty2.png','美少女2号')
],
)
],
),
),
);
}
}