网课学习心得

105 阅读1分钟

1.jpg

  • 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: '扫一扫',
            ),