-
Flutter-从入门到项目 07: 微信项目-发现页面
-
Flutter-从入门到项目 07: 微信项目-发现页面
-
Flutter-从入门到项目 07: 微信项目-发现页面
Flutter 专题目录汇总:这个目录方便大家快速查询你要学习的内容!!!
二: 微信项目发现页面
这个页面涉及到的可能前面没有讲解 就是关于布局. 在Flutter的世界里更多的是弹性盒子布局
弹性布局允许子组件按照一定比例来分配父容器空间。弹性布局的概念在其它
UI系统中也都存在,如H5中的弹性盒子布局,Android中的FlexboxLayout等。Flutter中的弹性布局主要通过Flex和Expanded来配合实现
- 1个
- 2个
- 3个
- 4个
① 发现页面实现
import 'package:flutter/material.dart';
import 'package:wecaht/pages/discover/kc_discover_cell.dart';
class KCDiscoverPage extends StatefulWidget {
@override
_KCDiscoverPageState createState() => _KCDiscoverPageState();
}
class _KCDiscoverPageState extends State<KCDiscoverPage> {
Color _themeColor = Color.fromRGBO(220, 220, 220, 1.0);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: _themeColor,
centerTitle: true,
elevation: 0.0,
title: Text('发现'),
),
body: Container(
color: _themeColor,
child: ListView(
children: <Widget>[
KCDiscoverCell(
imageName: 'images/朋友圈.png',
title: '朋友圈',
),
SizedBox(height: 10,),
KCDiscoverCell(
imageName: 'images/扫一扫.png',
title: '扫一扫',
),