This is the 12th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021.
1. Page analysis
My main list page is similar to the Discovery page except that there is oneThe head the view
andFloating camera
Part so we can divide the whole into 3 parts, head view, list, and camera, since the camera is always in the upper right corner we can use it as a wholestack
Packaging, and thenListView
Wrap the head.
2. Head view
Widget headView(){
return Container(
height: 160,
padding: EdgeInsets.only(left: 20,top: 50),
child:Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 70,
width: 70,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(14),
image: DecorationImage(image: AssetImage('images/ wechat emotix.png '))
),
),
Container(
/ / title
child: Column(
//NickName
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Text('helloFlutter',style: TextStyle(fontSize: 18,fontWeight: FontWeight.bold),),
),
/ / title
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('sdasd',style: TextStyle(fontSize: 14),),
/ / arrow
Image(
image: AssetImage('images/icon_right.png'),
width: 15() [() [() [() [() [() [() [() [() }Copy the code
So here we have the general effect and we need to adjust it a little bit, so here we put the head and the content to the right of the headrow
Middle left and right layout, layout from the top. Use up and down for content under main headings and subheadingsColumn
Layout, subheadings, and arrows use left and right layout, and the final layer is nested to get the effect shown above, but not as desired.
- Expend
Expanded component is mainly covered with the current spindle method, there is no space left in the spindle direction. We can just wrap a layer in the outermost layer, and set the spacing to adjust the control size
The final result
- Image fillet Settings
We can set the BoxDecoration to do the wrapping
BoxDecoration(
borderRadius: BorderRadius.circular(14),
image: DecorationImage(image: AssetImage('images/ wechat emotix.png '),fit: BoxFit.cover)
),
Copy the code
BorderRadius, fit: BoxFit. Cover cut.
3. The camera
Container(
// color: Colors.red, Top Margin 40
margin: EdgeInsets.only(top: 40, right: 15),
height: 25,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Image(image: AssetImage('images/camera. PNG')),,),Copy the code
And the main thing here is to position him in the upper right-hand corner, so we need to pack a layer with Row so that we can position itself, and of course we can also use Positioned
Positioned(
top: 40,
right: 15,
child: Image.asset('images/camera. PNG',height: 25)),Copy the code
removePadding
Basically removing the upper and lower security zones
factory MediaQuery.removePadding({
Key? key,
required BuildContext context,
bool removeLeft = false.bool removeTop = false.bool removeRight = false.bool removeBottom = false.required Widget child,
})
Copy the code
We remove the safe zone above
It goes straight to the top
Let’s adjust the height of the head
Effect: