flutter 仿豆瓣首页

image

image

直接贴代码

class homeextends StatefulWidget{
@override
  StatecreateState() {
// TODO: implement createState
    return homeState();
  }
}
class homeStateextends State{
var images =  ["http://www.quanjing.com/image/2018image/homepage/1.jpg?v=8", "http://www.quanjing.com/image/2018image/homepage/1.jpg?v=8",
  "http://www.quanjing.com/image/2018image/homepage/1.jpg?v=8"
  ];

    //图片list
    Listchildrens =new List();
    TabController_tabController;
    @override
  initState(){
    super.initState();
    centerimg(); //将包含图片的widget放到list中
    checkall();  //组合各种布局
  }

//搜索框
  Secech(){
return Row(
children: [
Expanded(child:
new ConstrainedBox(
constraints:BoxConstraints(
maxHeight:26,
          ),
child:TextField(
decoration:InputDecoration(
contentPadding:const EdgeInsets.symmetric(vertical:4.0),
              hintText:'搜索',
              prefixIcon:Icon(Icons.search),
              border:OutlineInputBorder(
borderRadius:BorderRadius.circular(10.0),
                borderSide: BorderSide.none,
              ),
              filled:true,
              fillColor: Colors.white,
            ),
          ),
        ),
        ),
      ],
    );
  }

@override
  Widgetbuild(BuildContext context) {
return new DefaultTabController(
length:2,
      child:new Scaffold(
appBar:new AppBar(
title: Secech(),
          bottom:new TabBar(
isScrollable:true,
              indicatorColor:Colors.white,
            unselectedLabelColor:Color(0xff666666),
            labelStyle:TextStyle(fontSize:16.0),
              tabs: [
new Text("动态",style:TextStyle(color: Colors.white,fontSize:18),),
              new Text("推荐",style:TextStyle(color: Colors.white,fontSize:18),),
            ],
            controller:_tabController,
          ),
        ),
        body:new TabBarView(
children: [
new Center(child:new Text('自行车')),
            new Center(child: checkall()),
          ],
        ),
      ),
    );
  }

//顶部布局
  cardtp(){
return new Container(
padding:const EdgeInsets.only(left:20.0,top:5.0,right:20.0,bottom:5.0),
      child:new Row(
children: [
Expanded(child:
new Row(
mainAxisAlignment: MainAxisAlignment.start,
            children: [
CircleAvatar(//圆形图标控件
                backgroundImage:new NetworkImage('https://upload.jianshu.io/users/upload_avatars/7700793/dbcf94ba-9e63-4fcf-aa77-361644dd5a87?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240'),//图片调取自网络
              ),
              new Column(
children: [
Container(
padding:EdgeInsets.only(left:5.0),
                    child:Text("名字",style:TextStyle(fontSize:12,fontWeight: FontWeight.w700, //字体粗细  粗体和正常
                        color: Colors.black
                    )),
                  ),
                  Container(
padding:EdgeInsets.only(left:5.0),
                    child:Text("简介",style:TextStyle(fontSize:11, //字体粗细  粗体和正常
                        color: Colors.black45
                    ),
                    ),
                  )
],
              ),
            ],
          ),
          ),
          Container(
child:Center(
child:PopupMenuButton(
padding:EdgeInsets.only(top:20),
                icon:Icon(Icons.more_horiz),
                itemBuilder: (BuildContext context) {
return >[
PopupMenuItem(child:Text("热度"), value:"hot",),
                    PopupMenuItem(child:Text("最新"), value:"new",),
                  ];
                },
                onSelected: (String action) {
switch (action) {
case "hot":
print("热度");
                      break;
                    case "new":
                      break;
                  }
},

                onCanceled: () {
print("onCanceled");
                },
              ),
            ),
          ),
        ],
      ),
    );
  }

//中间文字
  centertext(){
return new Container(
padding:const EdgeInsets.only(left:20.0,top:5.0,right:20.0,bottom:5.0),
      child:new Column(
crossAxisAlignment: CrossAxisAlignment.start,
        children: [
Text("qwqwq",style:TextStyle(fontSize:20),maxLines:1),
          Text("sssssssssssssssss"),
          Container(
child:
Wrap(
spacing:10.0,
              direction: Axis.horizontal,
              alignment: WrapAlignment.start,
              children:
childrens.map((c) =>Container(
child: c,
              ))
.toList(),
            ),
            ),
        ],
      ),
    );
  }
checkall(){
return ListView.builder(
itemCount:3,
    itemBuilder: (context,index){
if (index.isOdd)return new Divider(color: Colors.black26);
        return bjall();
  }
);
}
bjall(){
return new Container(
color: Colors.white,
    child:new Column(
crossAxisAlignment: CrossAxisAlignment.start,
      children: [
cardtp(),
        centertext(),
        bottomicon(),
      ],
    ),
  );
  }
//底部图片
  centerimg()  {
for(var x =0;x
childrens.add (
new  Container(
height:80,
            width:150,
            margin:EdgeInsets.fromLTRB(0, 6.0, 0, .0),
            decoration:BoxDecoration(//decoration 装饰: 设置边框，圆角什么的
              color: Colors.white70,
              borderRadius:BorderRadius.circular(5.0),
              image:DecorationImage(
image:NetworkImage(images[x]),
                  fit: BoxFit.fill
              ),
            ),
          ),
      );
    }
return childrens;
  }

//底部图标

  bottomicon(){
return new Container(
height:60.0,
        child:new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
new Icon(Icons.comment, color: Colors.green,),
            new Icon(Icons.beenhere, color: Colors.green),
            new Icon(Icons.data_usage, color: Colors.green),
          ],
        ),
      );
  }
}

主要记录点:

1.tab 实现顶部导航,有一个缺点就是没法调整文字的高度可以使用 flutter_custom_bottom_tab_bar 这个插件

2.动态循环widget布局 使用方法

children:list.map((c) =>Container(

child: c,

)).toList(),

这里的list是放置widget的list

3.warp布局、流式布局主要防止多张图片在超出宽度时自动换行

主要记录的目的是熟悉flutter布局,实际操作起来还是比较麻烦的花了我一早上的时间