一步一步完成Flutter應用開發-掘金App首頁

一天清晨發表於2021-03-16

寫一個仿掘金app主頁的效果，這裡面不涉及到網路請求，直接是頁面的鋪設。

構建頁面

想要實現效果首先需要把頁面構建出來，然後在研究動畫的效果，

上半部分

效果：

把這個抽離成一個元件：home_top.dart檔案

import 'package:flutter/material.dart';
import 'package:get/get.dart';

class HomeTopPage extends StatefulWidget {
  HomeTopPage({Key key, this.onSearchPress, this.onTagPress}) : super(key: key);

  final Function onTagPress;
  final Function onSearchPress;

  @override
  _HomeTopPageState createState() => _HomeTopPageState();
}

class _HomeTopPageState extends State<HomeTopPage> {
  String currentString = '推薦';

  tagButton({title = '標籤'}) {
    return FlatButton(
        onPressed: () {
          setState(() {
            currentString = title;
          });
        },
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text(title,
                style: currentString == title
                    ? TextStyle(fontSize: 20, color: Colors.blue)
                    : TextStyle(fontSize: 18, color: Colors.grey)),
            Offstage(
              offstage: currentString != title,
              child: Container(
                height: 2,
                width: 40,
                decoration: BoxDecoration(color: Colors.blue),
              ),
            )
          ],
        ));
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(top: Get.context.mediaQueryPadding.top),
      decoration: BoxDecoration(color: Colors.white),
      child: Column(
        children: [
          Container(
            width: Get.width,
            height: 40,
            child: Row(
              children: [
                Expanded(
                    child: InkWell(
                  onTap: () {
                    widget.onSearchPress();
                  },
                  child: Container(
                    margin: EdgeInsets.only(left: 10),
                    height: 36,
                    decoration: BoxDecoration(
                      color: Color.fromRGBO(235, 242, 244, 1),
                      borderRadius: BorderRadius.all(Radius.circular(5)),
                    ),
                    child: Row(
                      children: [
                        Padding(padding: EdgeInsets.symmetric(horizontal: 5)),
                        Icon(
                          Icons.search,
                          size: 18,
                          color: Colors.grey,
                        ),
                        Padding(padding: EdgeInsets.symmetric(horizontal: 5)),
                        Text(
                          '搜尋掘金',
                          style: TextStyle(fontSize: 18, color: Colors.grey),
                        )
                      ],
                    ),
                  ),
                )),
                FlatButton(
                    minWidth: 80,
                    onPressed: () {
                      widget.onTagPress();
                    },
                    child: Row(
                      children: [
                        Icon(
                          Icons.settings,
                          size: 18,
                          color: Colors.grey,
                        ),
                        Text('標籤',
                            style: TextStyle(fontSize: 18, color: Colors.grey))
                      ],
                    ))
              ],
            ),
          ),
          Container(
            height: 50,
            width: Get.width,
            padding: EdgeInsets.only(top: 15),
            child: SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: Row(
                children: [
                  '關注',
                  '推薦',
                  '熱榜',
                  '後端',
                  '前端',
                  'Android',
                  'iOS',
                  '人工智慧',
                  '開發工具',
                  '程式碼人生',
                  '閱讀'
                ].map<Widget>((e) => tagButton(title: e)).toList(),
              ),
            ),
          )
        ],
      ),
    );
  }
}

複製程式碼

主頁面引用曝漏兩個方法onSearchPress，onTagPress，故名思意，一個是搜尋點選方法，一個是標籤點選方法。

@override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Color.fromRGBO(235, 242, 244, 1),
        body: Column(
          children: [
            HomeTopPage(
              onSearchPress: () {},
              onTagPress: () {},
            )
          ],
        ));
  }
複製程式碼

列表部分

新建home_list.dart檔案。這裡直接使用之前封裝的ListView。傳送門。

程式碼如下：

import 'package:flutter/material.dart';
import 'package:flutter_common_app/widget/common_list.dart';

class HomeList extends StatefulWidget {
  HomeList({Key key}) : super(key: key);

  @override
  _HomeListState createState() => _HomeListState();
}

class _HomeListState extends State<HomeList> {
  List dataList = ['1', '2', '3'];

  itemWidget(isContainUrl) {
    return Container(
      constraints: BoxConstraints(
        minHeight: 80,
      ),
      margin: EdgeInsets.only(top: 1),
      padding: EdgeInsets.symmetric(horizontal: 20),
      decoration: BoxDecoration(color: Colors.white),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Expanded(
              child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                '有新工具了，趕緊來看看來看看有新工具了，趕緊來看看來看看有新工具了，趕緊來看看來看看有新工具了，趕緊來看看來看看',
                style: TextStyle(fontSize: 18),
                maxLines: 2,
                overflow: TextOverflow.ellipsis,
              ),
              Padding(
                padding: EdgeInsets.only(top: 5),
                child: Text(
                  '點贊89·閱讀123·一天清晨',
                  style: TextStyle(fontSize: 14, color: Colors.grey),
                ),
              )
            ],
          )),
          Offstage(
            offstage: isContainUrl,
            child: Container(
              height: 60,
              width: 60,
              decoration: BoxDecoration(color: Colors.red),
            ),
          )
        ],
      ),
    );
  }

  hotWidget() {
    return Container(
      margin: EdgeInsets.only(top: 10),
      child: Column(
        children: [
          Container(
            decoration: BoxDecoration(color: Colors.white),
            padding: EdgeInsets.only(left: 20),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Text('? 熱門推薦',
                    style: TextStyle(fontSize: 14, color: Colors.grey)),
                FlatButton(
                    onPressed: () {},
                    child: Row(
                      children: [
                        Text('文章榜',
                            style: TextStyle(fontSize: 14, color: Colors.grey)),
                        Icon(
                          Icons.keyboard_arrow_right,
                          color: Colors.grey,
                          size: 18,
                        )
                      ],
                    ))
              ],
            ),
          ),
          itemWidget(true),
          itemWidget(true),
          itemWidget(false),
        ],
      ),
    );
  }

  listItemWidget() {
    return Container(
      constraints: BoxConstraints(
        minHeight: 80,
      ),
      margin: EdgeInsets.only(top: 5),
      padding: EdgeInsets.symmetric(horizontal: 20),
      decoration: BoxDecoration(color: Colors.white),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(padding: EdgeInsets.symmetric(vertical: 5)),
          Row(
            children: [
              Icon(
                Icons.sentiment_very_satisfied,
                size: 16,
                color: Colors.grey,
              ),
              Text(
                '  一天清晨',
                style: TextStyle(fontSize: 16),
              ),
            ],
          ),
          Padding(padding: EdgeInsets.symmetric(vertical: 5)),
          Text(
            '有新工具了，趕緊來看看來看看有新工具了，趕緊來看看來看看有新工具了，趕緊來看看來看看有新工具了，趕緊來看看來看看',
            style: TextStyle(fontSize: 18),
            maxLines: 2,
            overflow: TextOverflow.ellipsis,
          ),
          Padding(padding: EdgeInsets.symmetric(vertical: 5)),
          Text(
            '有新工具了，趕緊來看看來看看有新工具了',
            style: TextStyle(fontSize: 14, color: Colors.grey),
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
          ),
          Padding(padding: EdgeInsets.symmetric(vertical: 5)),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return CommonListWiget(
      networkApi: (currentPage) async {
        Future.delayed(Duration(seconds: 2)).then((value) => {
              dataList.addAll(['1', '2'])
            });
        return dataList;
      },
      itemBuilder: (BuildContext context, int position) {
        if (position == 0) {
          return hotWidget();
        }
        return listItemWidget();
      },
    );
  }
}

複製程式碼

同樣在頁面引用一下這個檔案

@override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Color.fromRGBO(235, 242, 244, 1),
        body: Column(
          children: [
            HomeTopPage(
              onSearchPress: () {},
              onTagPress: () {},
            ),
            Expanded(child: HomeList()),
          ],
        ));
  }
複製程式碼

加入動畫

首先改造一下home_list.dart檔案，檢測一下滾動的高度

AnimationController _controller;
  ScrollController _scrollController = ScrollController();

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this);
    _scrollController
      ..addListener(() {
        setState(() {
          if (_scrollController.offset > 88) {
          // 把值傳出去
            widget.onScroll(255);
          } else if (_scrollController.offset <= 0) {
            widget.onScroll(0);
          } else {
            widget.onScroll(_scrollController.offset * 255 ~/ 88);
          }
        });
      });
  }
複製程式碼

接著改造一下home_top.dart檔案，讓頭部隨著滾動的狀態變化, 定義一個alpha屬性接受滑動的傳值。


@override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(top: Get.context.mediaQueryPadding.top),
      decoration: BoxDecoration(color: Colors.white),
      child: Stack(
        children: [
          renderSearch(),
          Container(
            height: 40,
            width: Get.width,
            margin: EdgeInsets.only(top: 55 + (0 - 40 * widget.alpha / 255)),
            child: SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: Row(
                children: [
                  '關注',
                  '推薦',
                  '熱榜',
                  '後端',
                  '前端',
                  'Android',
                  'iOS',
                  '人工智慧',
                  '開發工具',
                  '程式碼人生',
                  '閱讀'
                ].map<Widget>((e) => tagButton(title: e)).toList(),
              ),
            ),
          )
        ],
      ),
    );
    
    renderSearch() {
    return Positioned(
        top: 0 - 40 * widget.alpha / 255,
        child: Container(
          width: Get.width,
          height: 40,
          child: Row(
            children: [
              Expanded(
                  child: InkWell(
                onTap: () {
                  widget.onSearchPress();
                },
                child: Container(
                  margin: EdgeInsets.only(left: 10),
                  height: 36,
                  decoration: BoxDecoration(
                    color: Color.fromRGBO(235, 242, 244, 1)
                        .withAlpha(255 - widget.alpha),
                    borderRadius: BorderRadius.all(Radius.circular(5)),
                  ),
                  child: Row(
                    children: [
                      Padding(padding: EdgeInsets.symmetric(horizontal: 5)),
                      Icon(
                        Icons.search,
                        size: 18,
                        color: Colors.grey.withAlpha(255 - widget.alpha),
                      ),
                      Padding(padding: EdgeInsets.symmetric(horizontal: 5)),
                      Text(
                        '搜尋掘金',
                        style: TextStyle(
                            fontSize: 18,
                            color: Colors.grey.withAlpha(255 - widget.alpha)),
                      )
                    ],
                  ),
                ),
              )),
              FlatButton(
                  minWidth: 80,
                  onPressed: () {
                    widget.onTagPress();
                  },
                  child: Row(
                    children: [
                      Icon(
                        Icons.settings,
                        size: 18,
                        color: Colors.grey.withAlpha(255 - widget.alpha),
                      ),
                      Text('標籤',
                          style: TextStyle(
                              fontSize: 18,
                              color: Colors.grey.withAlpha(255 - widget.alpha)))
                    ],
                  ))
            ],
          ),
        ));
  }
複製程式碼

主頁面呼叫

@override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Color.fromRGBO(235, 242, 244, 1),
        body: Column(
          children: [
            HomeTopPage(
              onSearchPress: () {},
              onTagPress: () {},
              alpha: _alpha,
            ),
            Expanded(child: HomeList(onScroll: (value) {
              setState(() {
                _alpha = value;
              });
            })),
          ],
        ));
  }
複製程式碼

就ok了，歡迎同學們來指導討論。懂得分享才能共同進步。

一步一步完成Flutter應用開發-掘金App文章詳情完善
2021-03-25
FlutterAPP
一步一步完成Flutter應用開發-掘金App文章詳情，懸浮，標題動畫
2021-03-24
FlutterAPP動畫
一步一步完成Flutter應用開發-掘金App沸點拖拽排序，抖動，編輯話題
2021-03-18
FlutterAPP排序
flutter混合(iOS)開發第一步使用(Flutter_Boost)完成頁面之間的跳轉傳值
2020-06-18
FlutteriOS
flutter混合(iOS)開發第一步使用(Flutter_Boost)完成頁面之間的跳轉傳值(二)
2020-06-19
FlutteriOS
一步一步搭建Flutter開發架子-國際化，路由，本地化，響應式
2021-03-01
Flutter路由
一步一步開發SSL線上工具
2018-04-19
一步一步搭建Flutter開發架子-網路請求，非同步UI更新封裝
2021-03-02
Flutter非同步UI封裝
一步一步帶你掌握webpack(四）——開發
2019-04-15
Web
一步一步搭建react應用-前後端初始化
2019-02-16
React後端
2.帶你邁出Flutter開發的第一步
2019-03-19
Flutter
iOS--手把手教你一步一步完成搖骰子動畫
2018-06-01
iOS動畫
HTML效能提升第一步：首頁14kb規則
2021-03-28
HTML
Flutter 開發桌面應用——遷移已有App應用到桌面版
2019-06-09
FlutterAPP
跟我一步一步實現 Flutter 視訊播放外掛 (一)
2019-03-20
Flutter
帶你一步一步探索Flutter（一）-- Flutter初體驗以及認識常用的Widget
2019-06-30
Flutter
Flutter開發實戰高仿微信（1）首頁
2020-05-15
Flutter
直播app開發，首頁輪播圖效果實現
2021-10-28
APP
[HistoryOfEverything]Google開源Flutter App解讀（一）—— 專案結構和首頁
2019-01-08
GoFlutterAPP
uni-app打包web專案（uni-app開發vue網頁應用）
2023-03-17
APPWebVue網頁
iOS開發實戰-第4節-進一步完善微博頁面
2020-12-12
iOS
一步一步來
2019-01-06
使用 Flutter 加速應用開發
2021-04-06
Flutter
用uni-app開發app應用登陸
2019-03-13
APP
一步一步搭建react應用-node中使用 mocha + supertest + should 來寫單元測試
2019-02-16
React
使用React Hooks + 自定義Hook封裝一步一步打造一個完善的小型應用。
2019-08-29
ReactHook封裝
一步一步教你用 Vue.js + Vuex 製作專門收藏微信公眾號的 app
2018-12-12
Vue.jsAPP
一步一步上手MyBatisPlus
2020-12-12
MyBatis
一步步使用SAP雲平臺的WebIDE開發SAP UI5應用
2020-02-15
WebIDEUI
移遠通訊5G模組與英偉達Jetson AGX Orin平臺完成聯調，進一步加速AIoT應用開發
2022-05-24
AI
Dubbo 邁出雲原生重要一步 - 應用級服務發現解析
2020-06-08
一步一步學spring boot
2018-12-15
Spring Boot
如何一步一步配置webpack
2018-08-19
Web
一步一步理解命令模式
2019-05-17
模式
一步一步手寫GPT
2024-08-02
GPT
Flutter: 完成一個圖片APP
2019-06-18
FlutterAPP
使用 Flutter 開發 macOS App
2018-12-18
FlutterMacAPP
一步一步分析vue之observe
2019-02-28
Vue

一步一步完成Flutter應用開發-掘金App首頁

構建頁面

上半部分

列表部分

加入動畫

相關文章