flutter仿知乎首页页面列表实现

import 'package:flutter/material.dart';
import 'package:flutter_app/global_config.dart';
import 'package:flutter_app/home/article.dart';
import 'package:flutter_app/home/reply_page.dart';

class Follow extends StatefulWidget {
  @override
  _FollowState createState() => _FollowState();
}

class _FollowState extends State<Follow> {

Widget wordsCard(Article article){
  Widget markWidget;
  if(article.imgUrl==null){
    markWidget=new Text(
      article.mark,
      style: TextStyle(
        height: 1.3,
        color: GlobalConfig.fontColor
      ),
    );
  }else{
    markWidget=new Row(
      children: [
        Expanded(
            flex:2,
            child: Container(
          child: Text(
            article.mark,
            style: TextStyle(height:1.3,color: GlobalConfig.fontColor ),
          ),
        )),

        Expanded(
            flex: 1,
            child: new AspectRatio(
              aspectRatio: 3.0/2.0,
              child: Container(
               foregroundDecoration: BoxDecoration(
                 image: DecorationImage(
                   image: NetworkImage(article.imgUrl),
                   centerSlice: new Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),
                 ),
                 borderRadius: BorderRadius.all(Radius.circular(6.0))
               ),
              ),

            ))
      ],
    );
  }


  return Container(
    color: GlobalConfig.cardBackgroundColor,
    margin: EdgeInsets.only(top: 5.0,bottom: 5.0),
    child: FlatButton(
      onPressed: (){},
      child: Column(
        children: [
             Container(
               child: Row(
                 children: [
                  new Container(
                    child:       CircleAvatar(
                      backgroundImage: NetworkImage(article.headUrl),
                      radius: 11.0,
                    ),
                  ),
                   new Text(""+article.user+""+article.action+"."+article.time,
                   style: TextStyle(color: GlobalConfig.fontColor),)
                 ],
               ),
               padding: EdgeInsets.only(top: 10.0),
             )
        ],
      ),
    ),
  );

}



  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
       child: Container(
         margin: EdgeInsets.only(top: 5.0),
         child: Column(
           children: [
             wordsCard(articleList[0]),
             wordsCard(articleList[1]),
             wordsCard(articleList[2]),
           ],
         ),
       ),
    );
  }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值