Flutter 仿纵横中文网

2019-09-30 本文已影响0人 luacoding

代码

GITHUB

介绍

仿纵横中文网WAP页面

主要工作

路由
界面布局
组件拆分

组件

Container：背景色，padding，margin 布局，border,borderRadius
Row：子组件横向布局
Column：子组件纵向布局
Text : 文字展示
Image：图片展示
SingleChildScrollView ：超出滚动
flutter_swiper ：轮播组件

采坑

每个Scaffold组件的body属性需要使用Scaffold包裹，否则超出警告
每个activity界面，按照320pt 切分布局
flutter_swiper，需要手动设置itemHeight属性，itemCount 超过3，会报错
组件属性传递，事件传递。(与React 非常相似，可以参考相关代码)
三方依赖注入：更改pubspec.yaml文件dependencies
Dart update 一直失败。

代码示例

代码结构

main.dart：入口文件
MainScreen: 入口主页
home/book 等：各个模块组件
components: 全局模块组件
utils: 公共方法

主页

由各个自定义组件构成

组件详情

class HomeCard extends StatefulWidget {
  static String pageName = '首页卡片';
  final int k;
  final Map v;
  HomeCard({this.k, this.v}) : super();
  @override
  _HomeCard createState() => _HomeCard();
}

class _HomeCard extends State<HomeCard> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 75,
      margin: EdgeInsets.only(
        bottom: 18,
        left: widget.k % 3 == 0 ? 0 : 22,
        right: widget.k % 3 == 2 ? 0 : 22,
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Image.network(
            widget.v['image'],
            width: 75,
            height: 100,
          ),
          Container(
            margin: EdgeInsets.only(top: 9),
            child: Text(
              widget.v['title'],
              style: TextStyle(
                color: Color(0xff555555),
                fontSize: 12,
              ),
              maxLines: 2,
              overflow: TextOverflow.ellipsis,
            ),
          ),
        ],
      ),
    );
  }
}