谢栋
谢栋

Flutter入门进阶之旅 - Flutter课程表View

前言

上一节中我们一块学习Flutter生命周期相关的基本知识，了解到了在flutter中生命周期函数存在的意义以及各个不同生命周期函数的回调时机，到目前为止我们已经完成了对Flutter所有入门相关的课程学习，掌握了各种常用组件的使用方法以及使用路由来完成页面切换传递数据，还学习了在flutter中的数据存储，网络请求等一系列的相关课程。本次课程作为基础到进阶到过度篇，咱们来一块利用所学知识做一个课程表View，对Flutter相关知识点加以巩固提高，做到活学活用。

1.课程目标

  • 分析课表view组成部分，拆解绘制流程
  • 课表view绘制，数据准备
  • 自行利用所学Widget组合课表view

2.效果图

我们先来看下已经绘制好的课程表View效果图，然后对效果图上的具体实现流程做拆解分析，一步步来完成Flutter课程表view的实现。

syllabus.gif

从上面的效果图我们可以分析得出，该课表view可分解成下面几个部分，我用不同的颜色块标记出

在这里插入图片描述

整体可分为三个大块

  • 1 顶部蓝色框框圈住的日期星期区域
  • 2 左侧灰色框框圈住的课程节次索引区域
  • 3 中间绿色框框圈起来的课程信息区域

下面我们来追一看不同区域的具体实现代码

3. View拆分

3.1 顶部日期星期View

在这里插入图片描述

顶部日期View可以拆解为GridView+Column组成，之所以选择GridView是因为我们要做到Column里的数据每一个item都均分显示，GridView设置单行显示，Colum设置上面view是星期，下面view是日期，利用小算法计算出当前日期，然后给当前日期设置不同的样式，来提示用户。

分析了实现思路，具体代码我就不详细讲解了贴上顶部日期星期的具体实现代码供读者参考

星期日期View代码：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/pages/custom_widget/widget/SpaceWidget.dart';

/**
 * desc:
 * author: xiedong
 * date: 4/25/21
 **/
class SyllabusPage extends StatefulWidget {
  @override
  State createState() => PageState();
}

class PageState extends State {
  var weekList = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];

  var dateList = [];
  var currentWeekIndex = 0;

  @override
  void initState() {
    super.initState();

    var monday = 1;
    var mondayTime = DateTime.now();

    //获取本周星期一是几号
    while (mondayTime.weekday != monday) {
      mondayTime = mondayTime.subtract(new Duration(days: 1));
    }

    mondayTime.year; //2020 年
    mondayTime.month; //6(这里和js中的月份有区别，js中是从0开始，dart则从1开始，我们无需再进行加一处理) 月
    mondayTime.day; //6 日
    // nowTime.hour ;//6 时
    // nowTime.minute ;//6 分
    // nowTime.second ;//6 秒
    for (int i = 0; i < 7; i++) {
      dateList.add(
          mondayTime.month.toString() + "/" + (mondayTime.day + i).toString());
      if ((mondayTime.day + i) == DateTime.now().day) {
        setState(() {
          currentWeekIndex = i + 1;
        });
      }
    }
    // print('Recent monday '+DateTime.now().day.toString());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("我的课表"),
        centerTitle: true,
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          SizedBox(
            child: GridView.builder(
                shrinkWrap: true,
                physics: NeverScrollableScrollPhysics(),
                itemCount: 8,
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 8, childAspectRatio: 1 / 1),
                itemBuilder: (BuildContext context, int index) {
                  return Container(
                    color: index == this.currentWeekIndex
                        ? Color(0xf7f7f7)
                        : Colors.white,
                    child: Center(
                      child: index == 0
                          ? Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                Text("星期",
                                    style: TextStyle(
                                        fontSize: 14, color: Colors.black87)),
                                SpaceWidget(height: 5),
                                Text("日期", style: TextStyle(fontSize: 12)),
                              ],
                            )
                          : Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                Text(weekList[index - 1],
                                    style: TextStyle(
                                        fontSize: 14,
                                        color: index == currentWeekIndex
                                            ? Colors.lightBlue
                                            : Colors.black87)),
                                SpaceWidget(height: 5),
                                Text(dateList[index - 1],
                                    style: TextStyle(
                                        fontSize: 12,
                                        color: index == currentWeekIndex
                                            ? Colors.lightBlue
                                            : Colors.black87)),
                              ],
                            ),
                    ),
                  );
                }),
          ),
        ],
      ),
    );
  }
}

运行代码后，效果如下图所示：


在这里插入图片描述

3.2 中间课表view

在这里插入图片描述

中间课表view跟左侧课程节次指引是在一个大View里处理的，考虑到有些手机可能一屏显示不完整个课程表视图，这里我实现的逻辑是

  • 1 先把上图标号为2跟3的区域包裹在一个SingleChildScrollView里让整个View支持上下滑动，
  • 2.然后在SingleChildScrollView 里用Row包裹2跟3区域，2是一个GridView，整体布局1列10行，跟课表view保持高度一样，
  • 3 .区域3又分为两部分，一个是背景格子区域，另外一个带背景颜色的课表区域 ，整个3区域我还是利用GridView实现，
  • 4 在这里，我默认让每个课程View即图中标号为4 的区域占两个课程格子的大小，这样一周7天，每天有5大节课，所以GridView需要设置为5行7列，供35个item，然后让区域3跟左侧2区域高度一致，
  • 5 区域3 GridView中的每一个Item采用Stack布局，底下的一层view用Column包括两个高度一样的Container，设置好边框，让他呈现格子的样式，顶上的一层试图用来显示课程信息，背景颜色利用提前设置好的颜色数组值，每次随机取不同的值设置不同的颜色，再利用Center组件显示课程具体信息。
  • 6 左侧区域2 课程指引view设置相同的背景即可，不需要特殊处理

核心代码如下：

   Expanded(
            child: SingleChildScrollView(
              child: Row(
                children: [
                  Expanded(
                    flex: 1,
                    child: GridView.builder(
                        shrinkWrap: true,
                        // physics:ClampingScrollPhysics(),
                        itemCount: 10,
                        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                            crossAxisCount: 1, childAspectRatio: 1 / 2),
                        itemBuilder: (BuildContext context, int index) {
                          return Container(
                            // width: 25,
                            // height:s 80,
                              child: Center(
                                child: Text(
                                  (index + 1).toInt().toString(),
                                  style: TextStyle(fontSize: 15),
                                ),
                              ),
                              decoration: BoxDecoration(
                                color: Color(0xff5ff5),
                                // border: Border.all(color: Colors.black12, width: 0.5),
                                border: Border(
                                  bottom: BorderSide(
                                      color: Colors.black12, width: 0.5),
                                  right: BorderSide(
                                      color: Colors.black12, width: 0.5),
                                ),
                              ));
                        }),
                  ),
                  Expanded(
                    flex: 7,
                    child: GridView.builder(
                        shrinkWrap: true,
                        physics: NeverScrollableScrollPhysics(),
                        itemCount: 35,
                        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                            crossAxisCount: 7, childAspectRatio: 1 / 4),
                        itemBuilder: (BuildContext context, int index) {
                          return Container(
                            child: Stack(
                              children: [
                                Column(
                                  mainAxisAlignment:
                                  MainAxisAlignment.spaceBetween,
                                  children: [
                                    Flexible(
                                      flex: 1,
                                      child: Container(
                                          width: double.infinity,
                                          height: double.infinity,
                                          decoration: BoxDecoration(
                                            color: Colors.white,
                                            // border: Border.all(color: Colors.black12, width: 0.5),
                                            border: Border(
                                              bottom: BorderSide(
                                                  color: Colors.black12,
                                                  width: 0.5),
                                              right: BorderSide(
                                                  color: Colors.black12,
                                                  width: 0.5),
                                            ),
                                          )),
                                    ),
                                    Flexible(
                                      flex: 1,
                                      child: Container(
                                          width: double.infinity,
                                          height: double.infinity,
                                          decoration: BoxDecoration(
                                            color: Colors.white,
                                            // border: Border.all(color: Colors.black12, width: 0.5),
                                            border: Border(
                                              bottom: BorderSide(
                                                  color: Colors.black12,
                                                  width: 0.5),
                                              right: BorderSide(
                                                  color: Colors.black12,
                                                  width: 0.5),
                                            ),
                                          )),
                                    ),
                                  ],
                                ),
                                if (index % 5 == 0 || index % 5 == 1)
                                  Container(
                                    margin: EdgeInsets.all(0.5),
                                    decoration: BoxDecoration(
                                      borderRadius: BorderRadius.circular(2),
                                      color: colorList[index % 7],
                                    ),
                                    child: Center(
                                      child: Text(
                                        infoList[index % 2],
                                        textAlign: TextAlign.center,
                                        style: TextStyle(
                                            color: Colors.white,
                                            fontSize: 11,
                                            letterSpacing: 1),
                                      ),
                                    ),
                                  )
                              ],
                            ),
                          );
                        }),
                  )
                ],
              ),
            ),
          ),

运行代码后，中间课程信息View的效果如图

Kapture 2021-04-29 at 12.07.24.gif

完整代码如下：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/pages/custom_widget/widget/SpaceWidget.dart';

/**
 * desc:
 * author: xiedong
 * date: 4/25/21
 **/
class SyllabusPage extends StatefulWidget {
  @override
  State createState() => PageState();
}

class PageState extends State {
  var colorList = [
    Colors.red,
    Colors.lightBlueAccent,
    Colors.grey,
    Colors.cyan,
    Colors.amber,
    Colors.deepPurpleAccent,
    Colors.purpleAccent
  ];
  var infoList = ["高等数学-周某某教授@综合楼201", "大学英语-王某某讲师@行政楼501"];
  var weekList = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];

  var dateList = [];
  var currentWeekIndex = 0;

  @override
  void initState() {
    super.initState();

    var monday = 1;
    var mondayTime = DateTime.now();

    //获取本周星期一是几号
    while (mondayTime.weekday != monday) {
      mondayTime = mondayTime.subtract(new Duration(days: 1));
    }

    mondayTime.year; //2020 年
    mondayTime.month; //6(这里和js中的月份有区别，js中是从0开始，dart则从1开始，我们无需再进行加一处理) 月
    mondayTime.day; //6 日
    // nowTime.hour ;//6 时
    // nowTime.minute ;//6 分
    // nowTime.second ;//6 秒
    for (int i = 0; i < 7; i++) {
      dateList.add(
          mondayTime.month.toString() + "/" + (mondayTime.day + i).toString());
      if ((mondayTime.day + i) == DateTime.now().day) {
        setState(() {
          currentWeekIndex = i + 1;
        });
      }
    }
    // print('Recent monday '+DateTime.now().day.toString());
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          SizedBox(
            child: GridView.builder(
                shrinkWrap: true,
                physics: NeverScrollableScrollPhysics(),
                itemCount: 8,
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 8, childAspectRatio: 1 / 1),
                itemBuilder: (BuildContext context, int index) {
                  return Container(
                    color: index == this.currentWeekIndex
                        ? Color(0xf7f7f7)
                        : Colors.white,
                    child: Center(
                      child: index == 0
                          ? Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text("星期",
                              style: TextStyle(
                                  fontSize: 14, color: Colors.black87)),
                          SpaceWidget(height: 5),
                          Text("日期", style: TextStyle(fontSize: 12)),
                        ],
                      )
                          : Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text(weekList[index - 1],
                              style: TextStyle(
                                  fontSize: 14,
                                  color: index == currentWeekIndex
                                      ? Colors.lightBlue
                                      : Colors.black87)),
                          SpaceWidget(height: 5),
                          Text(dateList[index - 1],
                              style: TextStyle(
                                  fontSize: 12,
                                  color: index == currentWeekIndex
                                      ? Colors.lightBlue
                                      : Colors.black87)),
                        ],
                      ),
                    ),
                  );
                }),
          ),
          Expanded(
            child: SingleChildScrollView(
              child: Row(
                children: [
                  Expanded(
                    flex: 1,
                    child: GridView.builder(
                        shrinkWrap: true,
                        // physics:ClampingScrollPhysics(),
                        itemCount: 10,
                        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                            crossAxisCount: 1, childAspectRatio: 1 / 2),
                        itemBuilder: (BuildContext context, int index) {
                          return Container(
                            // width: 25,
                            // height:s 80,
                              child: Center(
                                child: Text(
                                  (index + 1).toInt().toString(),
                                  style: TextStyle(fontSize: 15),
                                ),
                              ),
                              decoration: BoxDecoration(
                                color: Color(0xff5ff5),
                                // border: Border.all(color: Colors.black12, width: 0.5),
                                border: Border(
                                  bottom: BorderSide(
                                      color: Colors.black12, width: 0.5),
                                  right: BorderSide(
                                      color: Colors.black12, width: 0.5),
                                ),
                              ));
                        }),
                  ),
                  Expanded(
                    flex: 7,
                    child: GridView.builder(
                        shrinkWrap: true,
                        physics: NeverScrollableScrollPhysics(),
                        itemCount: 35,
                        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                            crossAxisCount: 7, childAspectRatio: 1 / 4),
                        itemBuilder: (BuildContext context, int index) {
                          return Container(
                            child: Stack(
                              children: [
                                Column(
                                  mainAxisAlignment:
                                  MainAxisAlignment.spaceBetween,
                                  children: [
                                    Flexible(
                                      flex: 1,
                                      child: Container(
                                          width: double.infinity,
                                          height: double.infinity,
                                          decoration: BoxDecoration(
                                            color: Colors.white,
                                            // border: Border.all(color: Colors.black12, width: 0.5),
                                            border: Border(
                                              bottom: BorderSide(
                                                  color: Colors.black12,
                                                  width: 0.5),
                                              right: BorderSide(
                                                  color: Colors.black12,
                                                  width: 0.5),
                                            ),
                                          )),
                                    ),
                                    Flexible(
                                      flex: 1,
                                      child: Container(
                                          width: double.infinity,
                                          height: double.infinity,
                                          decoration: BoxDecoration(
                                            color: Colors.white,
                                            // border: Border.all(color: Colors.black12, width: 0.5),
                                            border: Border(
                                              bottom: BorderSide(
                                                  color: Colors.black12,
                                                  width: 0.5),
                                              right: BorderSide(
                                                  color: Colors.black12,
                                                  width: 0.5),
                                            ),
                                          )),
                                    ),
                                  ],
                                ),
                                if (index % 5 == 0 || index % 5 == 1)
                                  Container(
                                    margin: EdgeInsets.all(0.5),
                                    decoration: BoxDecoration(
                                      borderRadius: BorderRadius.circular(2),
                                      color: colorList[index % 7],
                                    ),
                                    child: Center(
                                      child: Text(
                                        infoList[index % 2],
                                        textAlign: TextAlign.center,
                                        style: TextStyle(
                                            color: Colors.white,
                                            fontSize: 11,
                                            letterSpacing: 1),
                                      ),
                                    ),
                                  )
                              ],
                            ),
                          );
                        }),
                  )
                ],
              ),
            ),
          ),
          _bottomView
        ],
      ),
    );
  }

  @override
  String pageTitle() => "我的课表";

  Widget _topView = SizedBox(
    height: 30,
    child: Expanded(
      child: ListView.builder(
          scrollDirection: Axis.horizontal,
          itemCount: 7,
          itemBuilder: (BuildContext context, int index) {
            return Text("dd");
          }),
    ),
  );
  Widget _centerView = Expanded(
    child: GridView.builder(
        itemCount: 63,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 7,
        ),
        itemBuilder: (BuildContext context, int index) {
          return Container(
            // width: 25,
            // height: 80,
              child: Center(
                child: Text(
                  (index + 1).toString(),
                  style: TextStyle(fontSize: 15),
                ),
              ),
              decoration: BoxDecoration(
                color: Color(0xff5ff5),
                border: Border.all(color: Colors.black12, width: 0.5),
              ));
        }),
  );

  Widget _bottomView = SizedBox(
    height: 30,
    child: Row(
      children: [
       //底部view可自行扩充
      ],
    ),
  );
}

详细代码已同步更新到我的Flutter入门进阶之旅专栏上，感兴趣的读者可以自行查阅更多相关代码：
仓库地址：本节Flutter课程吧View课程代码

你可能感兴趣的:(Flutter入门进阶之旅 - Flutter课程表View)

  • 【iOS】MVC设计模式 Magnetic_h iosmvc设计模式objective-c学习ui
    MVC前言如何设计一个程序的结构，这是一门专门的学问，叫做"架构模式"（architecturalpattern），属于编程的方法论。MVC模式就是架构模式的一种。它是Apple官方推荐的App开发架构，也是一般开发者最先遇到、最经典的架构。MVC各层controller层Controller/ViewController/VC（控制器）负责协调Model和View，处理大部分逻辑它将数据从Mod
  • OC语言多界面传值五大方式 Magnetic_h iosui学习objective-c开发语言
    前言在完成暑假仿写项目时，遇到了许多需要用到多界面传值的地方，这篇博客来总结一下比较常用的五种多界面传值的方式。属性传值属性传值一般用前一个界面向后一个界面传值，简单地说就是通过访问后一个视图控制器的属性来为它赋值，通过这个属性来做到从前一个界面向后一个界面传值。首先在后一个界面中定义属性@interfaceBViewController:UIViewController@propertyNSSt
  • UI学习——cell的复用和自定义cell Magnetic_h ui学习
    目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添
  • 第四天旅游线路预览——从换乘中心到喀纳斯湖 陟彼高冈yu 基于Googleearthstudio的旅游规划和预览旅游
    第四天：从贾登峪到喀纳斯风景区入口，晚上住宿贾登峪；换乘中心有4路车，喀纳斯①号车，去喀纳斯湖，路程时长约5分钟；将上面的的行程安排进行动态展示，具体步骤见”Googleearthstudio进行动态轨迹显示制作过程“、“Googleearthstudio入门教程”和“Googleearthstudio进阶教程“相关内容，得到行程如下所示：Day4-2-480p
  • linux中sdl的使用教程,sdl使用入门 Melissa Corvinus linux中sdl的使用教程
    本文通过一个简单示例讲解SDL的基本使用流程。示例中展示一个窗口，窗口里面有个随机颜色快随机移动。当我们鼠标点击关闭按钮时间窗口关闭。基本步骤如下：1.初始化SDL并创建一个窗口。SDL_Init()初始化SDL_CreateWindow()创建窗口2.纹理渲染存储RGB和存储纹理的区别：比如一个从左到右由红色渐变到蓝色的矩形，用存储RGB的话就需要把矩形中每个点的具体颜色值存储下来；而纹理只是一
  • Day1笔记-Python简介&标识符和关键字&输入输出 ~在杰难逃~ Pythonpython开发语言大数据数据分析数据挖掘
    大家好，从今天开始呢，杰哥开展一个新的专栏，当然，数据分析部分也会不定时更新的，这个新的专栏主要是讲解一些Python的基础语法和知识，帮助0基础的小伙伴入门和学习Python，感兴趣的小伙伴可以开始认真学习啦！一、Python简介【了解】1.计算机工作原理编程语言就是用来定义计算机程序的形式语言。我们通过编程语言来编写程序代码，再通过语言处理程序执行向计算机发送指令，让计算机完成对应的工作，编程
  • Python快速入门 —— 第三节：类与对象 孤华暗香 Python快速入门python开发语言
    第三节：类与对象目标：了解面向对象编程的基础概念，并学会如何定义类和创建对象。内容：类与对象：定义类：class关键字。类的构造函数：__init__()。类的属性和方法。对象的创建与使用。示例：classStudent:def__init__(self,name,age,major):self.name&#
  • C++菜鸟教程 - 从入门到精通 第二节 DreamByte c++
    一.上节课的补充(数据类型)1.前言继上节课,我们主要讲解了输入,输出和运算符,我们现在来补充一下数据类型的知识上节课遗漏了这个知识点,非常的抱歉顺便说一下,博主要上高中了,更新会慢,2-4周更新一次对了,正好赶上中秋节,小编跟大家说一句:中秋节快乐!2.int类型上节课,我们其实只用了int类型int类型,是整数类型,它们存贮的是整数,不能存小数(浮点数)定义变量的方式很简单inta;//定义一
  • STM32中的计时与延时 lupinjia STM32stm32单片机
    前言在裸机开发中，延时作为一种规定循环周期的方式经常被使用，其中尤以HAL库官方提供的HAL_Delay为甚。刚入门的小白可能会觉得既然有官方提供的延时函数，而且精度也还挺好，为什么不用呢？实际上HAL_Delay中有不少坑，而这些也只是HAL库中无数坑的其中一些。想从坑里跳出来还是得加强外设原理的学习和理解，切不可只依赖HAL库。除了延时之外，我们在开发中有时也会想要确定某段程序的耗时，这就需要
  • Python实现简单的机器学习算法 master_chenchengg pythonpython办公效率python开发IT
    Python实现简单的机器学习算法开篇：初探机器学习的奇妙之旅搭建环境：一切从安装开始必备工具箱第一步：安装Anaconda和JupyterNotebook小贴士：如何配置Python环境变量算法初体验：从零开始的Python机器学习线性回归：让数据说话数据准备：从哪里找数据编码实战：Python实现线性回归模型评估：如何判断模型好坏逻辑回归：从分类开始理论入门：什么是逻辑回归代码实现：使用skl
  • 2019考研 | 西交大软件工程 笔者阿蓉
    本科背景：某北京211学校电子信息工程互联网开发工作两年录取结果：全日制软件工程学院分数：初试350+复试笔试80+面试85+总排名：100+从五月份开始脱产学习，我主要说一下专业课和复试还有我对非全的一些看法。【数学100+】张宇，张宇，张宇。跟着张宇学习，入门视频刷一遍，真题刷两遍，错题刷三遍。书刷N多遍。从视频开始学习，是最快的学习方法。5-7月份把主要是数学学好，8-9月份开始给自己每个周
  • esp32开发快速入门 8 : MQTT 的快速入门，基于esp32实现MQTT通信 z755924843 ESP32开发快速入门服务器网络运维
    MQTT介绍简介MQTT（MessageQueuingTelemetryTransport，消息队列遥测传输协议），是一种基于发布/订阅（publish/subscribe）模式的"轻量级"通讯协议，该协议构建于TCP/IP协议上，由IBM在1999年发布。MQTT最大优点在于，可以以极少的代码和有限的带宽，为连接远程设备提供实时可靠的消息服务。作为一种低开销、低带宽占用的即时通讯协议，使其在物联
  • vue3中el-table中点击图片放大时，被表格覆盖 叫我小鹏呀 vue.jsjavascript前端
    问题：vue3中el-table中点击图片放大时，被表格覆盖。解决方法：el-image添加preview-teleported
  • Armv8.3 体系结构扩展--原文版 代码改变世界ctw ARM-TEE-Androidarmv8嵌入式arm架构安全架构芯片TrustzoneSecureboot
    快速链接:.ARMv8/ARMv9架构入门到精通-[目录]付费专栏-付费课程【购买须知】:个人博客笔记导读目录(全部)TheArmv8.3architectureextensionTheArmv8.3architectureextensionisanextensiontoArmv8.2.Itaddsmandatoryandoptionalarchitecturalfeatures.Somefeat
  • Python入门之Lesson2:Python基础语法 小熊同学哦 Python入门课程python开发语言算法数据结构青少年编程
    目录前言一.介绍1.变量和数据类型2.常见运算符3.输入输出4.条件语句5.循环结构二.练习三.总结前言欢迎来到《Python入门》系列博客的第二课。在上一课中，我们了解了Python的安装及运行环境的配置。在这一课中，我们将深入学习Python的基础语法，这是编写Python代码的根基。通过本节内容的学习，你将掌握变量、数据类型、运算符、输入输出、条件语句等Python编程的基础知识。一.介绍1
  • Android应用性能优化 轻口味 Android
    Android手机由于其本身的后台机制和硬件特点，性能上一直被诟病，所以软件开发者对软件本身的性能优化就显得尤为重要；本文将对Android开发过程中性能优化的各个方面做一个回顾与总结。Cache优化ListView缓存：ListView中有一个回收器，Item滑出界面的时候View会回收到这里，需要显示新的Item的时候，就尽量重用回收器里面的View；每次在getView函数中inflate新
  • 摄影小白，怎么才能拍出高大上产品图片？ 是波妞唉
    很多人以为文案只要会码字，会排版就OK了！说实话，没接触到这一行的时候，我的想法更简单，以为只要会写字就行！可是真做了文案才发现，码字只是入门级的基本功。一篇文章离不开排版、配图，说起来很简单！从头做到尾你就会发现，写文章用两个小时，找合适的配图居然要花掉半天的时间，甚至更久！图片能找到合适的就不怕，还有找不到的，比如产品图，只能亲自拍。拿着摆弄了半天，就是拍不出想要的效果，光线不好、搭出来丑破天
  • 2021 CCF 非专业级别软件能力认证第一轮（CSP-J1）入门级C++语言试题 （第三大题：完善程序 代码） mmz1207 c++csp
    最近有一段时间没更新了，在准备CSP考试，请大家见谅。（1）有n个人围成一个圈，依次标号0到n-1。从0号开始，依次0，1，0，1...交替报数，报到一的人离开，直至圈中剩最后一个人。求最后剩下的人的编号。#includeusingnamespacestd;intf[1000010];intmain(){intn;cin>>n;inti=0,cnt=0,p=0;while(cnt#includeu
  • Vue( ElementUI入门、vue-cli安装) m0_l5z elementuivue.js
    一.ElementUI入门目录：1.ElementUI入门1.1ElementUI简介1.2Vue+ElementUI安装1.3开发示例2.搭建nodejs环境2.1nodejs介绍2.2npm是什么2.3nodejs环境搭建2.3.1下载2.3.2解压2.3.3配置环境变量2.3.4配置npm全局模块路径和cache默认安装位置2.3.5修改npm镜像提高下载速度2.3.6验证安装结果3.运行n
  • Spring MVC 全面指南：从入门到精通的详细解析 一杯梅子酱 技术栈学习springmvcjava
    引言：SpringMVC，作为Spring框架的一个重要模块，为构建Web应用提供了强大的功能和灵活性。无论是初学者还是有一定经验的开发者，掌握SpringMVC都将显著提升你的Web开发技能。本文旨在为初学者提供一个全面且易于理解的学习路径，通过详细的知识点分析和实际案例，帮助你快速上手SpringMVC，让学习过程既深刻又高效。一、SpringMVC简介1.1什么是SpringMVC？Spri
  • 入门MySQL——查询语法练习 K_un
    前言：前面几篇文章为大家介绍了DML以及DDL语句的使用方法，本篇文章将主要讲述常用的查询语法。其实MySQL官网给出了多个示例数据库供大家实用查询，下面我们以最常用的员工示例数据库为准，详细介绍各自常用的查询语法。1.员工示例数据库导入官方文档员工示例数据库介绍及下载链接：https://dev.mysql.com/doc/employee/en/employees-installation.h
  • ESP32-C3入门教程 网络篇⑩——基于esp_https_ota和MQTT实现开机主动升级和被动触发升级的OTA功能 小康师兄 ESP32-C3入门教程https服务器esp32OTAMQTT
    文章目录一、前言二、软件流程三、部分源码四、运行演示一、前言本文基于VSCodeIDE进行编程、编译、下载、运行等操作基础入门章节请查阅：ESP32-C3入门教程基础篇①——基于VSCode构建HelloWorld教程目录大纲请查阅：ESP32-C3入门教程——导读ESP32-C3入门教程网络篇⑨——基于esp_https_ota实现史上最简单的ESP32OTA远程固件升级功能二、软件流程
  • 2023最详细的Python安装教程（Windows版本） 程序员林哥 Pythonpythonwindows开发语言
    python安装是学习pyhon第一步，很多刚入门小白不清楚如何安装python，今天我来带大家完成python安装与配置，跟着我一步步来，很简单，你肯定能完成。第一部分：python安装（一）准备工作1、下载和安装python(认准官方网站)当然你不想去下载的话也可以分享给你，还有入门学习教程，点击下方卡片跳转进群领取（二）开始安装对于Windows操作系统，可以下载“executableins
  • 【2022 CCF 非专业级别软件能力认证第一轮（CSP-J1）入门级 C++语言试题及解析】 汉子萌萌哒 CCFnoi算法数据结构c++
    一、单项选择题(共15题，每题2分，共计30分；每题有且仅有一个正确选项)1.以下哪种功能没有涉及C++语言的面向对象特性支持：()。A.C++中调用printf函数B.C++中调用用户定义的类成员函数C.C++中构造一个class或structD.C++中构造来源于同一基类的多个派生类题目解析【解析】正确答案:AC++基础知识，面向对象和类有关，类又涉及父类、子类、继承、派生等关系，printf
  • 现金贷“租系统”产业崛起：租金3000，本金10万，一月回本 Dayon
    最近，地下现金贷的全面崛起，已成了不可阻挡的趋势。大量民间资本开始涌入，民间高利贷、炒房团、土豪的钱，都裹挟其中。而地下现金贷的入门门槛正在不断降低，一条新的产业链开始崛起：租现金贷系统。现在，只需要10万本金，花3000元租个系统，两个人的团队，一个月就能回本。大量的小本金玩家进场了，为了急速获利，他们甚至将利率调到1600%以上。业内人士称，真实的现金贷用户，现在大概只有200多万。整个行业几
  • 【树一线性代数】005入门 Owlet_woodBird 算法
    Index本文稍后补全，推荐阅读：https://blog.csdn.net/weixin_60702024/article/details/141874376分析实现总结本文稍后补全，推荐阅读：https://blog.csdn.net/weixin_60702024/article/details/141874376已知非空二叉树T的结点值均为正整数，采用顺序存储方式保存，数据结构定义如下:t
  • 如何自学软件编程？零基础自学编程入门指南 _pangzi
    前言零基础自学编程的动力是什么?在开启学习编程之路的时候必须搞清楚自己为什么要学编程?是因为工资高?还是对编程有浓厚的兴趣？还有自己有一定的编程基础想要继续提升自己？其实对于这个问题需要具体分析，如果是单纯看到程序员工资高，而自己本身并没有什么兴趣，那我不建议自学，可以选择参加培训或者不要进入编程领域不然自己学不会没有获得高薪，反而浪费了大把的时间，如果方法不对，反而会打击自信心。下面小编针对学习
  • 微信小程序开发注意事项 jun778895 微信小程序小程序
    微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
  • 2019-07-09 AutoCompleteTextView 问题 皮皮铭
    实现自定义Adapter要实现Filterable接口，不然会报错重写getFilter()方法performFiltering()方法实现过滤数据的操作publishResults()用来接收performFiltering()的返回值，发布。
  • Linux CTF逆向入门 蚁景网络安全 linux运维CTF
    1.ELF格式我们先来看看ELF文件头，如果想详细了解，可以查看ELF的manpage文档。关于ELF更详细的说明：e_shoff：节头表的文件偏移量（字节）。如果文件没有节头表，则此成员值为零。sh_offset：表示了该section（节）离开文件头部位置的距离+-------------------+|ELFheader|---++--------->+-------------------
  • 开发者关心的那些事 圣子足道 ios游戏编程apple支付
    我要在app里添加IAP，必须要注册自己的产品标识符（product identifiers）。产品标识符是什么？ 产品标识符（Product Identifiers）是一串字符串，它用来识别你在应用内贩卖的每件商品。App Store用产品标识符来检索产品信息，标识符只能包含大小写字母（A-Z）、数字（0-9）、下划线（-）、以及圆点(.)。你可以任意排列这些元素，但我们建议你创建标识符时使用
  • 负载均衡器技术Nginx和F5的优缺点对比 bijian1013 nginxF5
            对于数据流量过大的网络中，往往单一设备无法承担，需要多台设备进行数据分流，而负载均衡器就是用来将数据分流到多台设备的一个转发器。         目前有许多不同的负载均衡技术用以满足不同的应用需求，如软/硬件负载均衡、本地/全局负载均衡、更高
  • LeetCode[Math] - #9 Palindrome Number Cwind javaAlgorithm题解LeetCodeMath
    原题链接：#9 Palindrome Number   要求： 判断一个整数是否是回文数，不要使用额外的存储空间   难度：简单   分析： 题目限制不允许使用额外的存储空间应指不允许使用O(n)的内存空间，O(1)的内存用于存储中间结果是可以接受的。于是考虑将该整型数反转，然后与原数字进行比较。 注：没有看到有关负数是否可以是回文数的明确结论，例如
  • 画图板的基本实现 15700786134 画图板
     要实现画图板的基本功能，除了在qq登陆界面中用到的组件和方法外，还需要添加鼠标监听器，和接口实现。 首先，需要显示一个JFrame界面： public class DrameFrame extends JFrame {              //显示
  • linux的ps命令 被触发 linux
    Linux中的ps命令是Process Status的缩写。ps命令用来列出系统中当前运行的那些进程。ps命令列出的是当前那些进程的快照，就是执行ps命令的那个时刻的那些进程，如果想要动态的显示进程信息，就可以使用top命令。 要对进程进行监测和控制，首先必须要了解当前进程的情况，也就是需要查看当前进程，而 ps 命令就是最基本同时也是非常强大的进程查看命令。使用该命令可以确定有哪些进程正在运行
  • Android 音乐播放器 下一曲 连续跳几首歌 肆无忌惮_ android
    最近在写安卓音乐播放器的时候遇到个问题。在MediaPlayer播放结束时会回调 player.setOnCompletionListener(new OnCompletionListener() { @Override public void onCompletion(MediaPlayer mp) { mp.reset(); Log.i("H
  • java导出txt文件的例子 知了ing javaservlet
    代码很简单就一个servlet,如下： package com.eastcom.servlet; import java.io.BufferedOutputStream; import java.io.IOException; import java.net.URLEncoder; import java.sql.Connection; import java.sql.Resu
  • Scala stack试玩, 提高第三方依赖下载速度 矮蛋蛋 scalasbt
    原文地址： http://segmentfault.com/a/1190000002894524 sbt下载速度实在是惨不忍睹, 需要做些配置优化 下载typesafe离线包, 保存为ivy本地库 wget http://downloads.typesafe.com/typesafe-activator/1.3.4/typesafe-activator-1.3.4.zip 解压r
  • phantomjs安装(linux，附带环境变量设置) ，以及casperjs安装。 alleni123 linuxspider
    1. 首先从官网 http://phantomjs.org/下载phantomjs压缩包，解压缩到/root/phantomjs文件夹。 2. 安装依赖 sudo yum install fontconfig freetype libfreetype.so.6 libfontconfig.so.1 libstdc++.so.6 3. 配置环境变量 vi /etc/profil
  • JAVA IO FileInputStream和FileOutputStream，字节流的打包输出 百合不是茶 java核心思想JAVA IO操作字节流
    在程序设计语言中，数据的保存是基本，如果某程序语言不能保存数据那么该语言是不可能存在的，JAVA是当今最流行的面向对象设计语言之一，在保存数据中也有自己独特的一面，字节流和字符流 1，字节流是由字节构成的，字符流是由字符构成的 字节流和字符流都是继承的InputStream和OutPutStream ,java中两种最基本的就是字节流和字符流   类 FileInputStream
  • Spring基础实例（依赖注入和控制反转） bijian1013 spring
    前提条件：在http://www.springsource.org/download网站上下载Spring框架，并将spring.jar、log4j-1.2.15.jar、commons-logging.jar加载至工程1.武器接口 package com.bijian.spring.base3; public interface Weapon { void kil
  • HR看重的十大技能 bijian1013 提升能力HR成长
        一个人掌握何种技能取决于他的兴趣、能力和聪明程度，也取决于他所能支配的资源以及制定的事业目标，拥有过硬技能的人有更多的工作机会。但是，由于经济发展前景不确定，掌握对你的事业有所帮助的技能显得尤为重要。以下是最受雇主欢迎的十种技能。 　　一、解决问题的能力 　　每天，我们都要在生活和工作中解决一些综合性的问题。那些能够发现问题、解决问题并迅速作出有效决
  • 【Thrift一】Thrift编译安装 bit1129 thrift
    什么是Thrift The Apache Thrift software framework, for scalable cross-language services development, combines a software stack with a code generation engine to build services that work efficiently and s
  • 【Avro三】Hadoop MapReduce读写Avro文件 bit1129 mapreduce
    Avro是Doug Cutting(此人绝对是神一般的存在）牵头开发的。 开发之初就是围绕着完善Hadoop生态系统的数据处理而开展的（使用Avro作为Hadoop MapReduce需要处理数据序列化和反序列化的场景）,因此Hadoop MapReduce集成Avro也就是自然而然的事情。 这个例子是一个简单的Hadoop MapReduce读取Avro格式的源文件进行计数统计，然后将计算结果
  • nginx定制500，502，503，504页面 ronin47 nginx　错误显示
    server { listen 80; error_page 500/500.html; error_page 502/502.html; error_page 503/503.html; error_page 504/504.html; location /test {return502;}} 配置很简单，和配
  • java-1.二叉查找树转为双向链表 bylijinnan 二叉查找树
    import java.util.ArrayList; import java.util.List; public class BSTreeToLinkedList { /* 把二元查找树转变成排序的双向链表 题目： 输入一棵二元查找树，将该二元查找树转换成一个排序的双向链表。 要求不能创建任何新的结点，只调整指针的指向。 10 / \ 6 14 / \
  • Netty源码学习-HTTP-tunnel bylijinnan javanetty
    Netty关于HTTP tunnel的说明： http://docs.jboss.org/netty/3.2/api/org/jboss/netty/channel/socket/http/package-summary.html#package_description 这个说明有点太简略了 一个完整的例子在这里： https://github.com/bylijinnan
  • JSONUtil.serialize(map)和JSON.toJSONString(map)的区别 coder_xpf jqueryjsonmapval()
     JSONUtil.serialize(map)和JSON.toJSONString(map)的区别   数据库查询出来的map有一个字段为空   通过System.out.println()输出 JSONUtil.serialize(map)： {"one":"1","two":"nul
  • Hibernate缓存总结 cuishikuan 开源sshjavawebhibernate缓存三大框架
    一、为什么要用Hibernate缓存？ Hibernate是一个持久层框架，经常访问物理数据库。 为了降低应用程序对物理数据源访问的频次，从而提高应用程序的运行性能。 缓存内的数据是对物理数据源中的数据的复制，应用程序在运行时从缓存读写数据，在特定的时刻或事件会同步缓存和物理数据源的数据。   二、Hibernate缓存原理是怎样的？ Hibernate缓存包括两大类：Hib
  • CentOs6 dalan_123 centos
    首先su - 切换到root下面1、首先要先安装GCC GCC-C++ Openssl等以来模块：yum -y install make gcc gcc-c++ kernel-devel m4 ncurses-devel openssl-devel2、再安装ncurses模块yum -y install ncurses-develyum install ncurses-devel3、下载Erang
  • 10款用 jquery 实现滚动条至页面底端自动加载数据效果 dcj3sjt126com JavaScript
      无限滚动自动翻页可以说是web2.0时代的一项堪称伟大的技术，它让我们在浏览页面的时候只需要把滚动条拉到网页底部就能自动显示下一页的结果，改变了一直以来只能通过点击下一页来翻页这种常规做法。 无限滚动自动翻页技术的鼻祖是微博的先驱：推特(twitter)，后来必应图片搜索、谷歌图片搜索、google reader、箱包批发网等纷纷抄袭了这一项技术，于是靠滚动浏览器滚动条
  • ImageButton去边框&Button或者ImageButton的背景透明 dcj3sjt126com imagebutton
    在ImageButton中载入图片后，很多人会觉得有图片周围的白边会影响到美观，其实解决这个问题有两种方法 一种方法是将ImageButton的背景改为所需要的图片。如：android:background="@drawable/XXX" 第二种方法就是将ImageButton背景改为透明，这个方法更常用 在XML里；    <ImageBut
  • JSP之c:foreach eksliang jspforearch
    原文出自：http://www.cnblogs.com/draem0507/archive/2012/09/24/2699745.html <c:forEach>标签用于通用数据循环，它有以下属性 属 性 描 述 是否必须 缺省值 items 进行循环的项目 否 无 begin 开始条件 否 0 end 结束条件 否 集合中的最后一个项目 step 步长 否 1
  • Android实现主动连接蓝牙耳机 gqdy365 android
    在Android程序中可以实现自动扫描蓝牙、配对蓝牙、建立数据通道。蓝牙分不同类型，这篇文字只讨论如何与蓝牙耳机连接。 大致可以分三步： 一、扫描蓝牙设备： 1、注册并监听广播： BluetoothAdapter.ACTION_DISCOVERY_STARTED BluetoothDevice.ACTION_FOUND BluetoothAdapter.ACTION_DIS
  • android学习轨迹之四：org.json.JSONException: No value for hyz301 json
    org.json.JSONException: No value for items  在JSON解析中会遇到一种错误，很常见的错误   06-21 12:19:08.714 2098-2127/com.jikexueyuan.secret I/System.out﹕ Result:{"status":1,"page":1,&
  • 干货分享：从零开始学编程 系列汇总 justjavac 编程
    程序员总爱重新发明轮子，于是做了要给轮子汇总。 从零开始写个编译器吧系列 (知乎专栏) 从零开始写一个简单的操作系统 (伯乐在线) 从零开始写JavaScript框架 (图灵社区) 从零开始写jQuery框架 (蓝色理想 ) 从零开始nodejs系列文章 (粉丝日志) 从零开始编写网络游戏 
  • jquery-autocomplete 使用手册 macroli jqueryAjax脚本
    jquery-autocomplete学习 一、用前必备 官方网站：http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ 当前版本：1.1 需要JQuery版本：1.2.6 二、使用 <script src="./jquery-1.3.2.js" type="text/ja
  • PLSQL-Developer或者Navicat等工具连接远程oracle数据库的详细配置以及数据库编码的修改 超声波 oracleplsql
    　　在服务器上将Oracle安装好之后接下来要做的就是通过本地机器来远程连接服务器端的oracle数据库，常用的客户端连接工具就是PLSQL-Developer或者Navicat这些工具了。刚开始也是各种报错，什么TNS:no listener;TNS:lost connection;TNS:target hosts...花了一天的时间终于让PLSQL-Developer和Navicat等这些客户
  • 数据仓库数据模型之：极限存储--历史拉链表 superlxw1234 极限存储数据仓库数据模型拉链历史表
    在数据仓库的数据模型设计过程中，经常会遇到这样的需求： 1. 数据量比较大; 2. 表中的部分字段会被update,如用户的地址，产品的描述信息，订单的状态等等; 3. 需要查看某一个时间点或者时间段的历史快照信息，比如，查看某一个订单在历史某一个时间点的状态，    比如，查看某一个用户在过去某一段时间内，更新过几次等等; 4. 变化的比例和频率不是很大，比如，总共有10
  • 10点睛Spring MVC4.1-全局异常处理 wiselyman spring mvc
    10.1 全局异常处理 使用@ControllerAdvice注解来实现全局异常处理; 使用@ControllerAdvice的属性缩小处理范围 10.2 演示 演示控制器 package com.wisely.web; import org.springframework.stereotype.Controller; import org.spring
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他