欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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布局的。

 Flutter入门(5)Item布局解析

Flutter入门(5)Item布局解析

相关标签: flutter