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 {
  @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: [
          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

你可能感兴趣的:(flutter)