Flutter 仿縱橫中文網

原創

lemon_ajiu

2019-10-29 00:15

代碼

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