1. My idea interface layout and modules
I interface is mainly constituted by a ListView,
** Note: ** a camera icon in the upper right corner is suspended button, do not slide with sliding ListView;
so Stack body with a layout, such that the camera button is suspended in the upper right corner ListView ;
focus on the first cell of a layout processing fillets:
2. Code combing
Code Example:
import 'package:flutter/material.dart';
import 'package:flutter_wechat/pages/discover/discover_cell.dart';
class MinePage extends StatefulWidget {
@override
_MinePageState createState() => _MinePageState();
}
class _MinePageState extends State<MinePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
Container(
height: 800,
child: MediaQuery.removePadding(
context: context,
removeTop: true,
child: ListView(
children: <Widget>[
Container(
height: 200,
color: Colors.white,
child: Container(
margin: EdgeInsets.only(left: 30, top: 100, bottom: 25),
child: Row(
children: <Widget>[
Container(
height: 75,
width: 75,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
image: DecorationImage(
fit: BoxFit.fitHeight,
image: AssetImage('images/cat.jpg'))),
),
Expanded(
child: Container(
padding: EdgeInsets.only(left: 15, right: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
child: Row(
children: <Widget>[
Text(
'女神',
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 25,
),
),
],
),
height: 35,
),
Container(
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
'微信号: wyy492409867',
style: TextStyle(
fontSize: 17, color: Colors.grey),
),
Image(
image: AssetImage(
'images/icon_right.png'),
width: 20,
)
],
),
height: 35,
)
],
),
))
],
),
)),
Container(
height: 10,
), //灰色分组
DisCover_Cell(
title: '支付',
imageName: 'images/微信支付.png',
),
Container(
height: 10,
), //灰色分组
DisCover_Cell(
title: '收藏',
imageName: 'images/微信收藏.png',
),
Row(
children: <Widget>[
Container(width: 50, height: 0.5, color: Colors.white),
Container(height: 0.5, color: Colors.grey)
],
), //分割线
DisCover_Cell(
title: '相册',
imageName: 'images/微信相册.png',
),
Row(
children: <Widget>[
Container(width: 50, height: 0.5, color: Colors.white),
Container(height: 0.5, color: Colors.grey)
],
), //分割线
DisCover_Cell(
title: '卡包',
imageName: 'images/微信卡包.png',
),
Row(
children: <Widget>[
Container(width: 50, height: 0.5, color: Colors.white),
Container(height: 0.5, color: Colors.grey)
],
), //分割线
DisCover_Cell(
title: '表情',
imageName: 'images/微信表情.png',
),
Container(
height: 10,
), //灰色分组
DisCover_Cell(
title: '设置',
imageName: 'images/微信设置.png',
),
],
)),
),
Container(
margin: EdgeInsets.only(top: 50, right: 20),
height: 25,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Image(height: 25, image: AssetImage('images/相机.png'))
],
),
),
],
));
}
}
Layout Precautions :
- Body using a Stack, ListView above was suspended in the camera, so the use of two Container, ListView first layout, and then use the camera Container Packaging suspension buttons;
- The first cell layout about using Row
- Left picture:
- To the right and down two lines of text using the Column layout, and use a packaged Expanded filling:
- The upper half of a micro-channel name Text;
- The lower half is a micro signal and an arrow icon, so that the two main directions in the use MainAxisAlignment.spaceBetween two ends;
Note that the code point :
- Rounded head and filling process Decoration :
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10), //圆角半径
image: DecorationImage(fit: BoxFit.fitHeight, //填充模式 fitHeight,fitWidth, image: AssetImage('images/cat.jpg')) //DecorationImage中的image属性,直接传入正常的Image),
),
- The status bar is not top of the head of the operation MediaQuery.removePadding :
child: MediaQuery.removePadding(
context: context,
removeTop: to true, // must set this property will be effective, removeTop, bottom, left, right, etc.
Child: the ListView ()
),
- Other cell using the cell encapsulation discover page directly.
3. Summary
- Flutter layout using a box model, so be familiar with the use of several layout Row, Column, Stack and so on;
- The main layout of this page has difficulty is the camera icon and a cell suspension, it can be used for the camera and its layout Stack ListView separated, the first cell of the layout is mainly skilled Row and Column, extending like using Expanded ;
- Flutter really simple to use, compared to iOS, although there are not many good control layout package for our use, but the same can achieve through their own package effect, a new new layout for their own language is a great upgrade , efforts continue to learn!
