Flutter-教你一步步还原豆瓣 07个人页面

分类：Flutter作者：佚名

个人页面

https://github.com/mumushuiding/douban

页面布局

 

修改 lib\views\person\person_page.dart,用以下代码替换

import 'package:Flutter/material.dart';

class PersonCenterPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // Scaffold 实现了基本的 material 布局
    return Scaffold(
      backgroundColor: Colors.green,
      // SafeArea 解决异形屏的问题
      body: SafeArea(
           child: nestedScrollView(
             headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled){
               return <Widget>[
                  PersonSliverAppBar(),
               ];
             }, 
             body: Container(
               color: Colors.white,
               child: CustomScrollView(
                slivers: <Widget>[
                  _divider(),
                  SliverToBoxAdapter(
                    child: Container(
                      color: Colors.blue,
                      child: Text('Box 2'),
                    ),
                  ),
                  _divider(),
                  SliverToBoxAdapter(
                    child: Container(
                      color: Colors.red,
                      child: Text('Box 3'),
                    ),
                  ),
                  _divider(),
                  SliverToBoxAdapter(
                    child: Container(
                      color: Colors.blue,
                      child: Text('Box 4'),
                    ),
                  ),
                  _divider(),
                  _dataSelect(),
                  _divider(),
                  _personItem('ic_me_journal.png', '我的发布'),
                  _personItem('ic_me_follows.png', '我的关注'),
                  _personItem('ic_me_photo_album.png', '相册'),
                  _personItem('ic_me_doulist.png', '豆列 / 收藏'),
                  _divider(),
                  _personItem('ic_me_wallet.png', '钱包'),
                 ]
               ),
             ),
          ), 
      ),
    );
  }
  // 分割线
  SliverToBoxAdapter _divider(){
    return SliverToBoxAdapter(
      child: Container(
        height:10.0,
        color: const Color.fromARGB(255, 247, 247, 247),
      ),
    );
  }
  _dataSelect(){
    return UseNetDataWidget();
  }
}
SliverToBoxAdapter _personItem(String imgAsset, String title, {VoidCallback onTab}){
  return SliverToBoxAdapter(
    child: Container(
      color: Colors.red,
      child: Text('个人项'),
    ),
  );
}
///这个用来改变书影音数据来自网络还是本地模拟
class UseNetDataWidget extends StatefulWidget{
  @override
  _UseNetDataWidgetState createState()=>_UseNetDataWidgetState();
}
class _UseNetDataWidgetState extends State<UseNetDataWidget> {
  bool mSelectNetData = false;
  @override
  Widget build(BuildContext context) {
    
    return SliverToBoxAdapter(
      child: Container(
        color: Colors.yellow,
        child: Text(
          '我选择的数据'
        ),
      )
    );
  }
}
class PersonSliverAppBar extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return SliverAppBar(
        backgroundColor: Colors.green,
        //是否随着滑动隐藏标题
        snap: false,
        floating: false,
        // 是否固定在顶部
        pinned: true,
        expandedHeight: 150.0, 
        leading: IconButton(icon: Icon(Icons.settings), onpressed: (){
          print('设置');
        }),
        actions: <Widget>[
          IconButton(icon: Icon(Icons.message), onpressed: (){
            print('查看消息');
          })
        ],
        flexibleSpace: FlexibleSpaceBar(
          centerTitle: true,
          title: Text(
            '我的',
          ),
        ),
      );
  }
  
}

AppBar

 

1、修改person_page, 替换 class PersonSliverAppBar

class PersonSliverAppBar extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return SliverAppBar(
        backgroundColor: Colors.green,
        //是否随着滑动隐藏标题
        snap: false,
        floating: false,
        // 是否固定在顶部
        pinned: true,
        expandedHeight: 150.0, 
        leading: IconButton(iconSize: 30, icon: Icon(Icons.settings), onpressed: (){
          print('设置');
        }),
        actions: <Widget>[
          IconButton(iconSize: 30, icon: Icon(Icons.message), onpressed: (){
            print('查看消息');
          })
        ],
        flexibleSpace: FlexibleSpaceBar(
          centerTitle: true,
          background: Container(
            padding: EdgeInsets.only(top:50.0,left:20,right:10,bottom:10),
            child: PersonInfo(),
          ),
        ),
      );
  }
  
}
class PersonInfo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    
    return Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        CircleAvatar(
          radius: 40,
          backgroundColor: Colors.white,
          child: Image.asset(Constant.ASSETS_IMG + 'ic_info_done.png'),
        ),
        Expanded(
          child: Padding(
            padding: EdgeInsets.only(left:20.0),
            child: Padding(
              padding: EdgeInsets.only(top:20),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Container(
                    padding:EdgeInsets.only(bottom:10.0),
                    child: Text(
                      '张三',
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 18.0,
                        color: Colors.white
                      ),
                    ),
                  ),
                  Row(
                    children: <Widget>[
                      Container(child: Text(
                        '关注 10',
                        style: TextStyle(
                          color: Colors.white
                        ),
                      )),
                      Container(
                        margin: EdgeInsets.only(left:10),
                        child: Text(
                          '被关注 12',
                          style: TextStyle(
                            color: Colors.white
                          ),
                        )
                      )
                    ],
                  ),
                ],
              ),
            ) 
          ),
        ),
        Container(
          child: Row(
            children: <Widget>[
              Container(
                child:Text('个人主页',
                  textAlign: TextAlign.right,
                  style: TextStyle(
                    color: Colors.white
                  ),
                )
              ),
              IconButton(
                icon: Icon(
                  Icons.chevron_right,
                  color: Colors.white,
                ),
                alignment: AlignmentDirectional.centerStart,
                onpressed: (){
                  print('个人主页');
                })
            ],
          ),
        )
      ],
    );
  }

个人项

 

修改 person_center_page.dart,替换 _personItem 函数：

SliverToBoxAdapter _personItem(String imgAsset, String title, {VoidCallback onTab}){
  return SliverToBoxAdapter(
    child: GestureDetector(
      behavior: HitTestBehavior.translucent,
      onTap: onTab,
      child: Row(
        children: <Widget>[
          Padding(
            padding: EdgeInsets.all(10.0),
            child: Image.asset(
              Constant.ASSETS_IMG + imgAsset,
              width:25.0,
              height: 25.0
            ),
          ),
          Expanded(
            child: Text(
              title,
              style: TextStyle(fontSize: 15.0)
            ),
          ),
          _rightArrow()
        ],
      ),
    )
  );
}
_rightArrow() {
    return Icon(
      Icons.chevron_right,
      color: const Color.fromARGB(255, 204, 204, 204),
    );
}

书影音tab

 

打开 person_center_page

将以下代码

SliverToBoxAdapter(
                    child: Container(
                      child: Text('Box 3'),
                    ),
                  ),

替换成

SliverToBoxAdapter(
                    child: Container(
                      child: VideoBookMusicBookWidget(),
                    ),
                  ),

同时添加

class VideoBookMusicBookWidget  extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    
    return _VideoBookMusicBookWidgetState();
  }

}
TabController _tabController;
final List<String> tabTxt = ['影视', '图书', '音乐'];
class TabBarWidget extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _TabBarWidgetState();
  }

}
class _TabBarWidgetState extends State<TabBarWidget>{
  Color selectColor, unselectedColor;
  TextStyle selectStyle, unselectedStyle;
  List<Widget> tabWidgets;

  @override
  void initState(){
    super.initState();
    selectColor = Colors.black;
    unselectedColor = Color.fromARGB(255, 117, 117, 117);
    selectStyle = TextStyle(fontSize: 18, color: selectColor);
    unselectedStyle = TextStyle(fontSize: 18, color: selectColor);
    tabWidgets = tabTxt.map((item) => 
      Text(
        item,
        style: TextStyle(fontSize: 20),
      )
    ).toList();
  }

  @override
  void dispose(){
    super.dispose();
    if (_tabController != null ) {
      _tabController.dispose();
    }
  }

  @override
  Widget build(BuildContext context) {
    return TabBar(
      tabs: tabWidgets,
      isScrollable: true,
      indicatorColor: selectColor,
      labelColor: selectColor,
      labelStyle: selectStyle,
      unselectedLabelColor: unselectedColor,
      unselectedLabelStyle: unselectedStyle,
      indicatorSize: TabBarIndicatorSize.label,
      controller: _tabController,
    );
  }
  
}
class _VideoBookMusicBookWidgetState extends State<VideoBookMusicBookWidget>
  with SingleTickerProviderStateMixin{
  
  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: tabTxt.length, vsync: this);
  }
  @override
  Widget build(BuildContext context) {
    
    return Container(
      height: 130.0,
      child: DefaultTabController(
        length: tabTxt.length,
        child: Column(
          children: <Widget>[
            Align(
              child: TabBarWidget(),
              alignment: Alignment.centerLeft,
            ),
            _tabView()
          ]
        ),
      ),
    );
  }
  Widget _tabView(){
    return Expanded(
      child: TabBarView(
        children: [
          _tabBarItem('bg_videos_stack_default.png'),
          _tabBarItem('bg_books_stack_default.png'),
          _tabBarItem('bg_music_stack_default.png'),
        ],
        controller: _tabController,
      ),
    );
  }
  _tabBarItem(String img){
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: <Widget>[
        getTabViewItem(img, '想看'),
        getTabViewItem(img, '在看'),
        getTabViewItem(img, '看过'),
      ],
    );
  }
  Widget getTabViewItem(String img, String txt){
    return Column(
      children: <Widget>[
        Expanded(
          child: Padding(
            padding: EdgeInsets.only(top: 15.0, bottom: 7.0),
            child: Image.asset(
              Constant.ASSETS_IMG + img,
              fit: BoxFit.contain,
            ),
          ),
        ),
        Text(txt),
      ],
    );
  }

书影音档案

 

修改 person_center_page：

将

SliverToBoxAdapter(
                    child: Container(
                      color: Colors.blue,
                      child: Text('Box 4'),
                    ),
                  ),

替换成：

Records(),

添加代码：

class Records extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    
    return SliverToBoxAdapter(
        child: Container(
          decoration: Boxdecoration(
            //背景
            color: Colors.black,
            //设置四周圆角 角度
            borderRadius: BorderRadius.all(Radius.circular(10.0)),
            //设置四周边框
            border: Border.all(width: 1, color: Colors.black),
          ),
          margin: EdgeInsets.all(10.0),
          child: Row(
            children: <Widget>[
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Row(
                      children: <Widget>[
                        Container(
                          padding: EdgeInsets.all(10.0),
                          child:Text(
                            '书影音档案',
                            style: TextStyle(color: Colors.white,fontWeight:FontWeight.bold,fontSize: 20),
                          ),
                         ),
                         IconButton(icon: Icon(Icons.chevron_right,color: Colors.grey,), onpressed: (){
                           print('书影音档案');
                         }),
                      ],
                    ),
                    Container(
                      padding: EdgeInsets.only(left:10,right:10,bottom: 10),
                      child:Text(
                        '看过 34 读过 0 听过 0',
                        style: TextStyle(color: Colors.white,),
                      ),
                    ),
                  ],
                ),
              ),
              Container(
                child: Container(
                  decoration: Boxdecoration(
                    color: Colors.blueGrey,
                    borderRadius: BorderRadius.all(Radius.circular(4.0)),
                    border: Border.all(width: 1, color: Colors.transparent),
                  ),
                  child: Row(
                    children: <Widget>[
                      Image.asset(
                        Constant.ASSETS_IMG + 'ic_tab_subject_active.png',
                        width: 30,
                        height: 30,
                      ),
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Text(
                            'Memories',
                            style: TextStyle(color: Colors.white,fontWeight:FontWeight.bold),
                          ),
                          Text(
                            '我的书影音档案故事',
                            style: TextStyle(color: Colors.white,fontWeight:FontWeight.bold),
                          )
                        ],
                      ),
                    ],
                  ),
                ),
              ),
            ]
          ),
        ),
    );
  }
  
}

原文地址：https://blog.csdn.net/mumushuiding/article/details/104802176

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

Flutter Component动画的显和隐怎么实现
这篇文章主要讲解了“FlutterComponent动画的显和隐怎么实现”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究...
flutter微信聊天输入框功能如何实现
这篇文章主要讲解了“flutter微信聊天输入框功能如何实现”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“f...
Flutter之Navigator的高级用法有哪些
本篇内容介绍了“Flutter之Navigator的高级用法有哪些”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处...
Flutter怎么使用Android原生播放器
这篇文章主要介绍“Flutter怎么使用Android原生播放器”，在日常操作中，相信很多人在Flutter怎么使用Android原生播放器问题上存在疑惑，小编查阅了各式资料，整...
Flutter开发的android端如何修改APP名称，logo，版本号
Flutter开发的android端如何修改APP名称，logo，版本号，具体的操作步骤：修改APP名称找到文件：android\\app\\src\\main\\AndroidManifest.xml
Flutter系列-flutter路由管理
Flutter路由管理初识路由概念一.路由管理1.1.Route1.2.MaterialPageRoute1.3.Navigator1.4.路由传值1.5 命名路由1.6.命名路由参数传递1.7.适配二、路由钩子三、onUnknownRoute四、结尾初识路由概念路由的概念由来已久，包括网络路由、后端路由，到现在广为流行的前端路由。无论路由的概念如何应用，它的核心是一个路由映射表。比如：名字 detail 映射到 DetailPage 页面等。有了这个映射表之后，我们就可以方便的根据名字来完成路由的转发
Flutter系列-搭建Flutter开发环境
前提：针对Android开发者（windows系统下），已安装Git，AndroidStudio(建议4.0+版本)一.下载Flutter SDK地址：https://flutter.dev/docs/development/tools/sdk/releases，在 Stable channel (Windows)里面下最新版本即可。Flutter的渠道版本会不停变动，请以Flutter官网为准。在中国，要想正常获取安装包列表或下载安装包，可能需要翻墙，也可以去Flutter github项目下去下载安
Flutter系列-Dart基础语法学习
一、变量变量是一个引用，根据Dart中“万物皆对象”原则，即变量存储的都是对象的引用，或者说它们都是指向对象。1.1.声明变量：//1.不指定类型var name = 'aaa';//2.明确指定类型String name = 'aaa';因为有类型推导，所以两种实现效果一样，官方推荐在函数内的本地变量尽量使用var声明。在变量类型并不明确的情况下，可以使用dynamic关键字//3.使用dynamic关键字dynamic name = 'aaa';1.2.默认值未初始化的变量
Flutter2.0运行在web上不同渲染器的问题
前言Flutter2.0发布不久，对web的支持刚刚进入stable阶段。初学几天，构建web应用时候碰到一些问题，比如中文显示成乱码，然后加载图片出现图片跨域问题：Failed to load network image...Trying to load an image from another domain?1.开启web端构建：使用下面这个命令才可以开启Web端构建的支持flutter config --enable-web提示我们：重新启动编辑器，以便它们读取新设置。2.重
Flutter打release包以及release包无法访问网络问题记录
一.Flutter打Android release包的步骤：1.为项目创建一个.jks签名文件（很简单，跳过）2.创建一个文件key.properties，直接复制下面key.properties位置如图：在里面输入一下内容：storePassword=iflytekkeyPassword=iflytekkeyAlias=teachingmachinestoreFile=E:/teacher/app/keys/TeachingMachine.jks输入你自己的passwork以及
React Native之Android原生通过DeviceEventEmitter发送消息给js
1 问题Android原生向js发消息,并且可以携带数据2 实现原理Android原生可以使用RCTEventEmitter来注册事件,然后这里需要指定事件的名字,然后在js那端进行监听同样事件的名字监听,就可以收到消息得到数据Android注册关键代码reactContext.getJSModule(DeviceEventManagerModule.RCT...
React Native之Flexbox布局和监测文本输入onChangeText
1 Flexbox布局1) flexDirection 可以决定布局的主轴,子元素是应该沿着水平轴(row)方向排列，还是沿着竖直轴(column)方向排列2) justifyContent 决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式 有flex-start、center、flex-end、space-around...
React Native之通过createStackNavigator实现携带参数的页面与页面之间的跳转
1 实现的功能在网上看React Native文档,我特码就想实现一个页面到另外一个页面的跳转,然后另外一个页面怎么获取参数,特么没找到一个说清楚的,要么太复杂,要么说了不理解,下面是我自己写的一个App.js文件,实现一个Home页面跳到另外Details页面,并且携带了参数怎么在Details页面获取,就是这么简单粗暴.2 测试DemoApp.js文件如下...
React Native之最构建对象通过构造方法传递值然后再获取值
1 问题在一个文件构建一个对象,然后在另外一个文件里面new这个对象,通过构造方法传递参数,然后再获取这个参数2 测试代码Student.js文件如下'use strict';import React from 'react'import {NativeModules, NativeEventEmitter, DeviceEventEmitter,Ale...
React Native之内部方法常用几种写法和调用规则
1 简单部分代码export default class App extends Component&amp;lt;Props&amp;gt; { render() { return ( &amp;lt;View {styles.container}&amp;gt; &amp;lt;View {styles.welcome}&amp;gt; &amp;l...
React Native之通过DeviceEventEmitter发送和接收事件
1 怎么实现发送和接收事件理论上封装了Android原生广播的代码,需要注册和反注册,这里用DeviceEventEmitter实现//增加监听DeviceEventEmitter.addListener//取消监听//this.emitter.remove();这里可也可以通过安卓原生向页面js发送消息,可以参考我的这篇博客React Native之Android原生通过Dev...
React Native之组件(Component)生命周期学习笔记
1、Component介绍一般Component需要被其它类进行继承，Component和Android一样，也有生命周期英文图片如下2 具体说明1)、挂载阶段constructor()//构造函数,声明之前先调用super(props)componentWillMount()//因为它发生在render()方法前，因此在该方法内同步设置状态...
React Native之触摸事件(Touchable系列和onLongPress)
1 触摸事件普通点击我们可以使用onPress方法,我们可以使用Touchable 系列控件设计我们的按钮TouchableHighlight 背景会在用户手指按下时变暗TouchableNativeFeedback用户手指按下时形成类似墨水涟漪的视觉效果TouchableOpacity指按下时降低按钮的透明度，而不会改变背景的颜色TouchableWithoutFeedbac...
React Native之编译提示Only one default export allowed per module.
1 问题部分代码如下class HomeScreen extends React.Component { render() { return ( &amp;lt;View {{ flex: 1, alignItems: 'center', justifyContent: 'center' }}&amp;gt; &amp;lt;Text&amp;gt;Home Scre...
React Native之Props(属性)和State(状态)和简单样式简单使用
1 Props(属性)和State(状态)和简单样式简单使用App.js代码如下/** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow */import React, {Component} from 'react';import {Pla...
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot