I. Effect drawing

Ii. Page analysis

Here we will focus only on the information page, which can be divided into two parts:

1. Top navigation bar

The top navigation bar has three fixed tabs. When selected, the font becomes larger and the color changes. If you use the TabBar control directly, you cannot change the font size, so you can customize the navigation bar to achieve the desired effect. If the Tab is dynamic, you can use a horizontal ListView. Here, because there are only three fixed tabs, you can use Row to nest three Text columns.

2. The page body

Page themes can be implemented directly using the ListView control, where the main item layout style:

1. As can be seen from the recommendation page, there are two cases, one is no picture, the other is the display of pictures. Here, a maximum of three pictures are displayed, judging whether there are pictures according to the picture set returned by the interface, and then loading different controls. So the recommendation page item style is roughly Colum+Text+Image+Row+Text.

2. The item styles of the city page and the shopping guide page are the same, but they are different from those of the recommendation page. The pictures of the recommendation page are in the middle, but those of the two pages are on the right, so the overall layout is on the right.

Code code

1. Build a navigation bar

Margin: Sets the distance from the top to the height of the status bar. Height: Sets the navigation bar height. TabText ():Text public property

Container: is a common Container control. It contains only one child control. It is used to locate and modify child controls, such as shapes and background colors.

SizeBox: A common control that contains only one child control and is used to limit the size of the child control.

Expanded: Expanded contains a child control that fills the rest of the page with no other parameters by default, similar to weight in Android, but with Expanded, the size of the parent component should be computable or fixed, not unlimited, or the program won’t know and will pack errors.

PageView uses currentIndex to associate updates between the top text page and the theme page. When sliding to switch pages, synchronize updates to the top TAB navigation bar.

class TabBarInfoPageState extends State<TabBarInfoPage> { int currentIndex = 0; @override Widget build(BuildContext context) { return Container( color: Colors.white, child: Column(children: [ Container( margin: EdgeInsets.only(top: ScreenUtil().statusBarHeight), height: 80.h, child: Row( children: [SizedBox(width: 20.w), tabText(" recommended ", 0), SizedBox(width: 50.w), tabText(" wu2 ", 1), SizedBox(width: 20.w) 50. W), tabText(" guide ", 2)],)), Expanded(Child: PageView.Builder (onPageChanged: ((int index) => setState(() { currentIndex = index; })), itemCount: 3, itemBuilder: (context, index) { return InfoListPage(index + 1); })) ])); } /// Navigation bar Text style definition Text tabText(String Text, int index) {return Text(Text, style: TextStyle(color: currentIndex == index ? Colors.black : Colors.grey, fontSize: currentIndex == index ? 40.sp : 30.sp)); }Copy the code
2. Build a list

There are two types of information lists, one with multiple images in the middle, and the other with single images on the right.

/ / / recommend tabUI style widgets recommendWidget (InfoMessageDataActivityData info) {return the Column (crossAxisAlignment: CrossAxisAlignment.start, children: [ Text(info.msgTitle.trim(), textAlign: TextAlign.left, style: TextStyle(fontSize: 30.sp)), SizedBox(height: 20.h), Row( children: images(info.msgTitleImgList), mainAxisAlignment: MainAxisAlignment.spaceBetween, ), SizedBox( height: 20.h, ), Row(children: [ Text( info.sourceInfo, style: TextStyle(color: color.grey),), Text("${info.clicknum} read ", style: TextStyle(color: color.grey),), Text("${info.clicknum} read ", style: TextStyle(color: color.grey),) Colors.grey)) ], mainAxisAlignment: MainAxisAlignment.spaceBetween), SizedBox(height: 20.h), Divider( height: 1.h, indent: 0, color: Colors.grey, ) ]); }Copy the code
Widget shoppingWidget(InfoMessageDataActivityData info) { List<String> images = info.msgTitleImgList; return Column(crossAxisAlignment: CrossAxisAlignment.start, children: [ Row(crossAxisAlignment: CrossAxisAlignment.start, children: [ Expanded( child: SizedBox( height: 150.h, child: Column( mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.start, children: [ Text(info.msgTitle, textAlign: TextAlign.left, style: TextStyle(fontSize: 30.sp)), Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Text( info.sourceInfo, style: TextStyle(color: Color.grey),), Text("${info.clicknum} read ", style: TextStyle(color: Colors.grey)) ]), ]))), images == null ? Container() : Padding( padding: EdgeInsets.only(left: 15.w), child: ClipRRect( child: Image.network(info.msgTitleImgList[0], width: 220.w, height: 150.h, fit: BoxFit.cover), borderRadius: BorderRadius.circular(6), )) ]), SizedBox(height: 20.h), Divider( height: 1.h, indent: 0, color: Colors.grey, ) ]); }Copy the code