1.私の考えインターフェースのレイアウトとモジュール
Iインタフェースは、主に、リストビューで構成され、
**注：**右上のカメラアイコンが中断されるボタンは、スライドリストビューでスライドしない。
ので、カメラボタンが右上のリストビューに懸濁されるようにレイアウトを有する積層体;
レイアウト処理フィレットの最初のセルにフォーカス：
2.コードコーミング
コード例：
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'))
],
),
),
],
));
}
}
レイアウト上の注意：
- 2つのコンテナ、リストビュー最初のレイアウトの使用、及び、カメラコンテナ包装サスペンションボタンを使用してスタックを使用して本体は、リストビューは、上記カメラに懸濁しました。
- 行の使用についての最初のセルのレイアウト
- 左写真：
- 右へと列のレイアウトを使用した2行のテキストダウン、及びパッケージ拡張フィリングを使用します。
- マイクロチャンネル名のテキストの上半分。
- 下半分は、微小信号と矢印アイコンであるように使用MainAxisAlignment.spaceBetween両端に2つの主な方向、
コード・ポイントがあります：
- 丸みを帯びた頭部および充填プロセスデコレーション：
装飾：BoxDecoration（
borderRadius：BorderRadius.circular（10）、//圆角半径
画像：DecorationImage（fit: BoxFit.fitHeight, //填充模式 fitHeight,fitWidth, image: AssetImage('images/cat.jpg')) //DecorationImage中的image属性,直接传入正常的Image）、
）、
- ステータスバーには、操作の頭の上ではありませんMediaQuery.removePadding：
子供：MediaQuery.removePadding（
コンテキスト：コンテキスト、
removeTop：trueに、//このプロパティが有効になります設定する必要があり、removeTop、下、左、右、など
子供：リストビュー（）
）、
- 細胞カプセル化を使用して他のセルには、直接ページを発見します。
3.まとめ
- ボックスモデルを使用してフラッターレイアウトは、そのようにいくつかのレイアウト行、列、スタックとの使用に精通していること。
- このページの主なレイアウトが困難であるカメラアイコン、細胞懸濁液であり、レイアウトの最初のセルが拡張使用のように延びる、主に当行と列であり、スタックリストビューを分離カメラとそのレイアウトのために使用することができます;
- 私達の使用のために多くの良い制御レイアウトパッケージが存在しないが、iOSのに比べて、使用するフラッターは本当にシンプルですが、同じことが、自分のパッケージの効果により達成することができ、自分の言語のための新しい新しいレイアウトは素晴らしいアップグレードです、努力が学ぶために続け！
