Flutter-仿纵横中文网

代码

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,
            ),
          ),
        ],
      ),
    );
  }
}

组件调用

添加三方依赖

修改 pubspec.yaml 文件，vscode 自动下载依赖

接口

接口代码

界面展示

相关

dart 爬虫实践

仿穷游 APP