Flutter入门(5)Item布局解析
程序员文章站
2022-03-11 08:57:58
...
接着上一篇的网络请求,看一下item布局怎么弄成这样的!! 下面是我的理解,如果有错请您及时指出。对着代码看图,哦嚯嚯。
Widget _itemChapter(int index) {
var projectData = _chapterList[index];
return InkWell(
//InkWell 是个点击效果
child: Card(
// 卡片布局
margin: EdgeInsets.all(6.0), //偏移
child: Column(
//相当于垂直布局
crossAxisAlignment: CrossAxisAlignment.start, // 开始位置
children: <Widget>[
Padding(
padding: EdgeInsets.all(8.0), //所有的偏移8
child: Text(projectData.title,
style: TextStyle(fontSize: 16.0, color: Colors.black)),
),
Padding(
padding: EdgeInsets.fromLTRB(8.0, 1.0, 8.0, 1.0), //
child: Text(
'${(projectData.superChapterName)}/${(projectData.chapterName)}',
style: TextStyle(fontSize: 13.0, color: Colors.blue[300]),
)),
Padding(
padding: EdgeInsets.all(8),
child: Row(
//水平布局
children: <Widget>[
Icon(
Icons.person,
color: Colors.grey,
),
Padding(
padding: EdgeInsets.fromLTRB(5, 0, 0, 0),
child: Text(
projectData.author,
style: TextStyle(fontSize: 12, color: Colors.grey),
),
),
Expanded(
//填充 Row、Column、Flex会被Expanded撑开,充满主轴可用空间
flex: 1,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
//相当于的grivate.end
children: <Widget>[
Icon(
Icons.timer,
color: Colors.grey,
),
Text(projectData.niceDate,
style:
TextStyle(fontSize: 12, color: Colors.grey))
],
),
)
],
),
),
],
)),
);
}
下面是我画的一张图,很潦草,也就是描述这个item布局的。