flutter布局详解及代码示例（下）

布局

基本布局

  • GridView（二维滚动列表）：比ListView多了一个方向的数据填充。
  • ListBody（滚动列表）：相比ListView，没有回收复用，简单易用。
  • Table（表格布局）：子元素类似表格一样在X轴和Y轴排列分布。
  • Flow（流式布局）：相比Wrap布局的子元素自动换行，Flow需要自行在Delegate里写算法实现换行。
  • Wrap（流式布局）：子元素在X轴放得下就放，放不下就去下一行的布局。
  • ScrollView(滚动视图)：一般搭配Column使用的类似滚动列表的布局。

GridView

  • 就是二维的ListView
  • 有五种构造方式
    • GridView()
      • 默认构造；
      • 硬编码子widget，数量多有性能风险
    • GridVIew.builder()
      • 懒加载
    • GridView.costom()
    • GirdView.count()
      • 在交叉轴方向上固定数目
    • GridView.extent()
      • 在交叉轴方向上固定数目且有长度限制

代码

/// GridView()
GridView(gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3,//交叉轴方向的数目),children: <Widget>[Text('1'),Text('2'),Text('3'),Text('4'),Text('5'),Text('6'),Text('7'),Text('8'),Text('9'),],
),
/// GridView.builder()
final List<String> name = <String>['1','2','3',];
GridView.builder(itemCount: name.length,gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3,//交叉轴方向item的数量mainAxisSpacing: 2.0,//主轴方向的间隔crossAxisSpacing: 2.0,//交叉轴之间的间隔),itemBuilder: (context, index) {return Container(child: Text(name[index]),);},
),
/// GridView.costom()GridView.custom(gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(maxCrossAxisExtent: 80.0,//在交叉轴方向上单个item的最大长度crossAxisCount: 3,//交叉轴方向item的数量mainAxisSpacing: 2.0,//主轴方向的间隔),childrenDelegate: SliverChildBuilderDelegate((context, index) {return Container(child: Text(name[index]),);},childCount: name.length,),
),
/// GirdView.count()
GridView.count(crossAxisCount: 3,children: <Widget>[Text('1'),Text('2'),Text('3'),Text('4'),Text('5'),Text('6'),Text('7'),Text('8'),Text('9'),],
),
/// GridView.extent()
GridView.extent(maxCrossAxisExtent: 100.0,//在交叉轴方向上item的最大长度crossAxisCount: 3,//交叉轴方向item的数量mainAxisSpacing: 2.0,//主轴方向的间隔children: <Widget>[Container(child: Text("1"),),Container(child: Text("2"),),Container(child: Text("3"),),],
),

完整示例代码

import 'package:flutter/material.dart';class HomeTabPage1 extends StatelessWidget {List listData = [{"title": "标题1","author": "内容1","image": "https://www.itying.com/images/flutter/1.png"},{"title": "标题2","author": "内容2","image": "https://www.itying.com/images/flutter/2.png"},{"title": "标题3","author": "内容3","image": "https://www.itying.com/images/flutter/3.png"},{"title": "标题4","author": "内容4","image": "https://www.itying.com/images/flutter/4.png"},{"title": "标题5","author": "内容5","image": "https://www.itying.com/images/flutter/5.png"},{"title": "标题6","author": "内容6","image": "https://www.itying.com/images/flutter/6.png"},{"title": "标题7","author": "内容7","image": "https://www.itying.com/images/flutter/7.png"},{"title": "标题8","author": "内容8","image": "https://www.itying.com/images/flutter/1.png"},{"title": "标题9","author": "内容9","image": "https://www.itying.com/images/flutter/2.png"},{"title": "标题1","author": "内容1","image": "https://www.itying.com/images/flutter/1.png"},{"title": "标题2","author": "内容2","image": "https://www.itying.com/images/flutter/2.png"},{"title": "标题3","author": "内容3","image": "https://www.itying.com/images/flutter/3.png"},{"title": "标题4","author": "内容4","image": "https://www.itying.com/images/flutter/4.png"},{"title": "标题5","author": "内容5","image": "https://www.itying.com/images/flutter/5.png"},{"title": "标题6","author": "内容6","image": "https://www.itying.com/images/flutter/6.png"}];List<Widget> _getData() {List<Widget> list = [];for (var i = 0; i < listData.length; i++) {list.add(Container(child: Column(children: [Image.network(listData[i]["image"],fit: BoxFit.cover,),Text(listData[i]["title"],textAlign:TextAlign.center,)],),));}return list;}@overrideWidget build(BuildContext context) {return GridView.count(//设置滚动方向scrollDirection: Axis.vertical,//设置列数crossAxisCount: 5,//设置内边距（整个GridView的）padding: EdgeInsets.all(30),//设置横向间距（3个间距一起用就能控制item各种距离了）crossAxisSpacing: 30,//设置主轴间距mainAxisSpacing: 30,children: _getData(),);}
}

常用参数

gridDelegate
  • 有两个实现类
    • SliverGridDelegateWithFixedCrossAxisCount
      • 根据设置的个数显示二维滚动列表
    • SliverGridDelegateWithMaxCrossAxisExtent
      • 根据设置的长度显示二维滚动列表
scrollDirection
* 滚动方向* Axis.vertical* 竖向滚动* Axis.horizontal* 横向滚动
reverse
* 组件反向排序
controller
* 滚动监听
primary
* 值为false，内容不足不可滑动
* 值为true，内容不足可以尝试滑动
shrinkWrap
* 内容适配，默认为false
padding
* 内边距
crossAxisCount
* 列数
mainAxisSpacing
* 主轴之间的间距
crossAxisSpacing
* 横轴之间的间距
childAspectRatio
* 设置宽高的比例
* GridView的子组件直接设置宽高没有反应，可以通过childAspectRatio修改宽高
cacheExtent
* 设置预加载区域
children
* 组件元素 const Widget列表
* 数组内添加widget类型的数据
* flutter的所有组件都是widget,也就是说所有的GridView可以添加所有的组件
semanticChildCount
* 提供语义信息的子组件数量

ListBody

  • 很少单独使用，搭配如Row、Column、ListView、Flex一起使用。

代码

Column(//主轴垂直排列的列表，未限制宽，默认将充满屏幕children: <Widget>[ListBody(//指定主轴方向与父框架相同mainAxis: Axis.vertical,reverse: false,//不反向children: <Widget>[Container(color: Colors.red, width: 50.0, height: 50.0),Container(color: Colors.yellow, width: 50.0, height: 50.0),Container(color: Colors.green, width: 50.0, height: 50.0),Container(color: Colors.blue, width: 50.0, height: 50.0),Container(color: Colors.black, width: 50.0, height: 50.0),],)],
)

Table

  • 像表格一样布局

代码

Container(width: 300.0,height: 200.0,padding: EdgeInsets.all(2.0),color: Color(0xFFC5CAE9),child: Table(//每行中单元格的宽度，TableRow内元素个数，即列数，从第一个到最后一个的宽度//如果排列根据排列方向显示不同columnWidths: const <int, TableColumnWidth>{0: FixedColumnWidth(30.0),1: FixedColumnWidth(70.0),2: FixedColumnWidth(50.0),3: FixedColumnWidth(100.0),},//默认未显示宽度  默认的每一列宽度值，默认情况下均分。defaultColumnWidth: const FlexColumnWidth(1.0),//每个表格的排列方向，此处设置从右到左textDirection: TextDirection.rtl,//表格边框，此处设置蓝色，2像素宽，实线border: TableBorder.all(color: Colors.blue, width: 2.0, style: BorderStyle.solid),//每一个单元格的垂直方向的对齐方式，默认为顶部对齐defaultVerticalAlignment: TableCellVerticalAlignment.top,//基线类型，与TableCellVerticalAlignment.baseline一起使用//textBaseline: null,children: <TableRow>[TableRow(decoration: BoxDecoration(color: Colors.purpleAccent),children: <Widget>[Text('A1'),Text('A2'),Text('A3'),Text('A4'),],),TableRow(decoration: BoxDecoration(color: Colors.purpleAccent),children: <Widget>[Container(color: Colors.red, child: Text('赤')),Container(color: Colors.orange, child: Text('橙')),Container(color: Colors.yellow, child: Text('黄')),Container(color: Colors.green, child: Text('绿')),],),TableRow(children: <Widget>[Text('B1'),Text('B2'),Text('B3'),Text('B4'),]),],),
)

参数

  • columnWidth：每列单元格的宽度，int为从0到每行的个数-1
  • defaultColumnWidth：默认的每一列宽度值，默认情况下均分。
  • textDirection：每列的排列方向，默认从左到右
  • border：TableBorder 表格的边框
  • defaultVerticalAlignment：单元格默认垂直方向上的对齐方式，默认上对齐TableCellVerticalAlignment.top
  • textBaseline：TableCellVerticalAlignment.baseline与此属性配合使用。文本基线类型
  • children：存放每行的单元格内容的类别

Flow

  • 重点在于FlowDelegate的使用

FlowDelegate的方法

abstract class FlowDelegate {const FlowDelegate({ Listenable repaint }) : _repaint = repaint;final Listenable _repaint;//重写设置尺寸Size getSize(BoxConstraints constraints) => constraints.biggest;//重写设置约束BoxConstraints getConstraintsForChild(int i, BoxConstraints constraints) => constraints;//绘制children的位置和大小void paintChildren(FlowPaintingContext context);//是否要从新布局，可自己定制规则bool shouldRelayout(covariant FlowDelegate oldDelegate) => false;//是否从新绘制，可自己定制规则bool shouldRepaint(covariant FlowDelegate oldDelegate);@overrideString toString() => '$runtimeType';
}

代码

Flow(delegate: TestFlowDelegate(margin: EdgeInsets.all(5.0)),children: <Widget>[new Container(width: 60.0,  height: 60.0, color: Colors.red,child: Text('红'), alignment: Alignment.center, ),new Container(width: 60.0, height: 60.0,color: Colors.orange,child: Text('橙'),alignment: Alignment.center,  ),new Container(width: 60.0,height: 60.0,color: Colors.yellow,child: Text('黄'),alignment: Alignment.center,      ),new Container(width: 60.0,height: 60.0,color: Colors.green,child: Text('绿'),alignment: Alignment.center,  ),new Container(width: 60.0,height: 60.0,color: Colors.cyan,child: Text('青'),alignment: Alignment.center，     ),new Container(width: 60.0, height: 60.0,color: Colors.blue,child: Text('蓝'),alignment: Alignment.center,  ),new Container(width: 60.0,height: 60.0,color: Colors.purple,child: Text('紫'),alignment: Alignment.center,   ),],
)class TestFlowDelegate extends FlowDelegate {EdgeInsets margin = EdgeInsets.zero;TestFlowDelegate({this.margin});@overridevoid paintChildren(FlowPaintingContext context) {var x = margin.left;var y = margin.top;for (int i = 0; i < context.childCount; i++) {var w = context.getChildSize(i).width + x + margin.right;if (w < context.size.width) {context.paintChild(i,transform: new Matrix4.translationValues(x, y, 0.0));x = w + margin.left;} else {x = margin.left;y += context.getChildSize(i).height + margin.top + margin.bottom;context.paintChild(i,transform: new Matrix4.translationValues(x, y, 0.0));x += context.getChildSize(i).width + margin.left + margin.right;}}}@overridebool shouldRepaint(FlowDelegate oldDelegate) {return oldDelegate != this;}
}

Wrap

  • 在mainAxis上空间不足时，则向crossAxis上去扩展显示。
  • Wrap使用方便一些，但是Flow能实现Wrap，Flow更强一些。

参数

  • direction ：主轴方向，默认水平
  • alignment ：主轴方向方式，值为WrapAlignment的枚举值，详情请看Row的对齐方式
  • spacing ：主轴方向上child之间的间距，默认为0
  • runAlignment ： 新一行或一列的对齐方式
  • runSpacing ：新的一行或一列的间距，默认为0
  • crossAxisAlignment：交叉轴的对齐方式，默认是从主轴开始位置开始
  • textDirection：每一行或一列的排列方式
    • 如果一行有三个元素，则第一行取出前三个元素2,1,0这样排列
  • verticalDirection：垂直方向上排列方式，值为VerticalDirection的枚举值，默认从上到下

代码

Container(alignment: Alignment.topCenter,child:  Wrap(//主轴方向，默认水平direction: Axis.horizontal,//主轴方向方式，包裹在一个控件内效果明显，默认主轴方向开始位置开始alignment: WrapAlignment.spaceBetween,//主轴方向上child之间的间距，默认为0spacing: 6.0,// 新一行或一列的对齐方式runAlignment: WrapAlignment.spaceBetween,//新的一行或一列的间距，默认为0runSpacing: 0.0,//交叉轴的对齐方式，默认是从主轴开始位置开始crossAxisAlignment: WrapCrossAlignment.start,//每一行或一列的排列方式，如果一行有三个元素，则第一行取出前三个元素2,1,0这样排列//默认从左到右textDirection: TextDirection.ltr,//垂直方向上排列方式，默认从上到下verticalDirection: VerticalDirection.down,children: <Widget>[Chip(avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('1')),label: Text('Hamilton'),),Chip(avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('2')),label: Text('Lafayette'),),Chip(avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('3')),label: Text('Mulligan'),),Chip(avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('4')),label: Text('Laurens'),),Chip(avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('5')),label: Text('Hamilton'),),Chip(avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('6')),label: Text('Lafayette'),),Chip(avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('7')),label: Text('Mulligan'),),Chip(avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('8')),label: Text('Laurens'),),Chip(avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('9')),label: Text('Hamilton'),),Chip(avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('10')),label: Text('Lafayette'),),Chip(avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('11')),label: Text('Mulligan'),),Chip(avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('12')),label: Text('Laurens'),),],),
)

ScrollView

  • 有很多子类实现：
    • SingleChildScrollView

SingleChildScrollView

  • 有子view数组的ScrollView
代码
SingleChildScrollView(child: Column(children: <Widget>[Container(height: 200,color: Colors.red,),Container(height: 200,color: Colors.green,),Container(height: 200,color: Colors.blue,),Container(height: 200,color: Colors.yellow,),Container(height: 200,color: Colors.orange,),],),
),

自定义ScrollPhysics控制滑动效果

  • 准确的说这个属于所有physics参数共用的一个案例
  • 继承ScrollPhysics可以实现自定义滑动的效果
import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyCustomScrollPhysics extends ScrollPhysics {const MyCustomScrollPhysics({ScrollPhysics? parent}) : super(parent: parent);@overrideMyCustomScrollPhysics applyTo(ScrollPhysics? ancestor) {return MyCustomScrollPhysics(parent: buildParent(ancestor));}@overridedouble applyBoundaryConditions(ScrollMetrics position, double value) {// 检查是否已经滑动到边界if (value < position.pixels && position.pixels <= position.minScrollExtent) {// 滑动到顶部边界时，允许继续向上滚动return 0.0;} else if (value > position.pixels && position.pixels >= position.maxScrollExtent) {// 滑动到底部边界时，允许继续向下滚动return 0.0;}// 其他情况，使用默认的边界条件return super.applyBoundaryConditions(position, value);}
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(body: CustomScrollView(physics: MyCustomScrollPhysics(), // 使用自定义的ScrollPhysicsslivers: <Widget>[SliverAppBar(expandedHeight: 200.0,pinned: true,flexibleSpace: FlexibleSpaceBar(title: Text('Custom Scroll Physics Example'),),),SliverList(delegate: SliverChildBuilderDelegate((BuildContext context, int index) {return ListTile(title: Text('Item $index'),);},childCount: 100, // 你的列表项数量),),],),),);}
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/174074.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

OpenCV入门11——图像的分割与修复

OpenCV入门11——图像的分割与修复

文章目录 图像分割的基本概念实战-分水岭法(一)实战-分水岭法(二)GrabCut基本原理实战-GrabCut主体程序的实现实战-GrabCut鼠标事件的处理实战-调用GrabCut实现图像分割meanshift图像分割视频前后景分离其它对视频前后影分离的方法图像修复 图像分割是计算机视觉中的一个重要领…
阅读更多...
Docker智驾开发环境搭建

Docker智驾开发环境搭建

文章目录 背景1. 什么是容器？2. 什么是Docker？2.1 Docker架构3. 为什么要使用Docker？3.1 Docker容器虚拟化的好处3.2 Docker在开发和运维中的优势4. Docker容器与传统虚拟化的区别4.1 区别4.2 Docker的优势5. Docker的核心概念6. Docker在嵌入式开发中的应用7. docker实践参…
阅读更多...
deque容器结构学习笔记

deque容器结构学习笔记

1.结构图 2.deque对比vector和list deque双端队列&#xff0c;就像是list和vector的结合 vector&#xff1a; 优点&#xff1a;1.可以随机读取 2. 空间利用率高 缺点&#xff1a;1. 除了尾插尾删&#xff0c;其他插入删除效率比较低 2. 扩容效率低 list&#xff1a; 优点&…
阅读更多...
好用的png图片打包plist工具，推荐使用pngPackerGUI_V2.0

好用的png图片打包plist工具，推荐使用pngPackerGUI_V2.0

png图片打包plist工具&#xff0c;手把手教你使用pngPackerGUI_V2.0此软件是在pngpacker_V1.1软件基础之后&#xff0c;开发的界面化操作软件&#xff0c;方便不太懂命令行的小白快捷上手使用。1.下载并解压缩软件&#xff0c;得到如下目录&#xff0c;双击打开 pngPackerGUI.e…
阅读更多...
C#连接Redis

C#连接Redis

**第一步：nuget包——ServiceStack.Redis ** public RedisCache _iCache = new RedisCache(); public void test(){string tokenKey = "";Token authToken = _iCache.Get<Token>(tokenKey);if (authToken == null){authToken = new Token();authToken.SignT…
阅读更多...
C++STL——string类详解及其模拟实现

C++STL——string类详解及其模拟实现

CSTL——string类 1. STL简介 STL全称standard template libaray&#xff0c;译为标准模板库 需要注意&#xff0c;STL不是C的标准库&#xff0c;而是C标准库的重要组成部分STL是一个包含众多数据结构和算法的软件框架 下面展示STL的六大组件&#xff1a; 本章&#xff0c;我…
阅读更多...
base64 前端显示 data:image/jpg；base64

base64 前端显示 data:image/jpg；base64

在css里的写法&#xff1a; #est_switch {background: url(data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gIoSUNDX1BST0ZJTEUAAQEAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAA…
阅读更多...
Laravel JsonResponse数组获取

Laravel JsonResponse数组获取

laravel 一个service 调用 另外一个service 返回的 JsonResponse 对象&#xff0c;需要转为数组 $serviceData (new UserService())->lists(); //$data 就是获取的array 数据 $data $serviceData->getData(true) //将数组类型 转为 JsonResponse response()->json(…
阅读更多...
命令行执行Office的安装、卸载、升级

命令行执行Office的安装、卸载、升级

卸载Office 2016 ----------------------\\wdfs01\OfficeProPlus2016\setup.exe /uninstall proplus /config \\wdfs01\OfficeProPlus2016\config.xml 安装Office 365 -------------------- d:\Setup.exe /configure d:\config.xml 升级Office 365 -------------------- #升级时…
阅读更多...
三季度营收持续上涨，高途终于“松了一口气”？

三季度营收持续上涨，高途终于“松了一口气”？

近日&#xff0c;高途发布2023年第三季度财报。财报数据显示&#xff0c;高途实现净收入7.89亿元&#xff0c;同比增长30.2%。 同时&#xff0c;高途还透露了对于“AI教育”的布局。AI的发展无疑会给高途更大的机遇和更多的期待。随着人工智能技术在公司产品和服务各环节的落地…
阅读更多...
HTML5+CSS3+JS小实例：九宫格图片鼠标移入移出方向感知特效

HTML5+CSS3+JS小实例：九宫格图片鼠标移入移出方向感知特效

实例：九宫格图片鼠标移入移出方向感知特效 技术栈：HTML+CSS+JS 效果： 源码： 【HTML】 <!DOCTYPE html> <html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport&…
阅读更多...
python树的孩子链存储结构

python树的孩子链存储结构

树的孩子链存储结构是一种树的存储方式&#xff0c;它使用孩子兄弟表示法来表示树的结构。在这种存储结构中&#xff0c;树的每个节点都有一个指向其第一个孩子的指针和一个指向其下一个兄弟的指针。这样&#xff0c;可以通过这些指针来表示树的层次结构和节点之间的关系。 具…
阅读更多...
springframe工程导入

springframe工程导入

配置gradle工程 init.d 目录下新建init.gradle allprojects {repositories {mavenLocal()maven {allowInsecureProtocol trueurl https://maven.aliyun.com/nexus/content/repositories/central/}} } 报错Plugin [id: org.jetbrains.dokka, version: 0.10.1, apply: false] w…
阅读更多...
ArkTS-页面跳转（router）

ArkTS-页面跳转（router）

1. 导入router import router from ohos.router2. 跳转方式 2.1 router.pushUrl :跳转到应用内的指定页面 2.1.1 pushUrl(options: RouterOptions): Promise 参数名说明options跳转页面描述信息。 router.pushUrl({url: pages/home,params: {data1: message,data2: {data3…
阅读更多...
Himall商城OrderApplication

Himall商城OrderApplication

目录 1 Himall商城OrderApplication 1.1 商家手动分配门店 1.1.1 /// 分配门店时更新商家、门店库存 1.1.2 /// 分配门店订单到新门店 1.1.3 /// 分配门店订单回到商家 1.1.4 /// 更新订单所属门店 1.2 /// 获取待评价订单数量 Himall商城OrderApplication
阅读更多...
其利天下技术总监冯建武受邀出席“2023年电子工程师大会”并作主题演讲

其利天下技术总监冯建武受邀出席“2023年电子工程师大会”并作主题演讲

2023年11月23日&#xff0c;由华秋电子发烧友主办的“2023年电子工程师大会暨第三届社区年度颁奖活动”在深圳新一代产业园成功举行。本次年度颁奖活动邀请了高校教授、企业高管、行业专家、资深电子工程师等共300多人出席。聚焦“电机驱动技术”、“开源硬件”、“OpenHarmony…
阅读更多...
ChatGLM2-6B微调过程说明文档

ChatGLM2-6B微调过程说明文档

参考文档&#xff1a; ChatGLM2-6B 微调(初体验) - 知乎 环境配置 下载anaconda&#xff0c;版本是Anaconda3-2023.03-0-Linux-x86_64.sh&#xff0c;其对应的python版本是3.10&#xff0c;试过3.7和3.11版本的在运行时都报错。 执行下面的命令安装anaconda sh Anaconda3-202…
阅读更多...
Linux文件与路径

Linux文件与路径

Linux文件与路径 1、文件结构 ​ Windows和Linux文件系统区别 ​ 在windows平台下&#xff0c;打开“此电脑”&#xff0c;我们可以看到盘符分区 ​ 每个驱动器都有自己的根目录结构&#xff0c;这样形成了多个树并列的情形 ​ 但是在 Linux 下&#xff0c;我们是看不到这些…
阅读更多...
linux系统初始化本地git，创建ssh-key

linux系统初始化本地git，创建ssh-key

step1, 在linux系统配置你的git信息 sudo apt install -y git//step1 git config --global user.name your_name // github官网注册的用户名 git config --global user.email your_email //gitub官网注册绑定的邮箱 git config --list //可以查看刚才你的配置内容…
阅读更多...
关于tryit-jssip的点点滴滴

关于tryit-jssip的点点滴滴

本人不熟悉前端&#xff0c;但从今天开始研究tryit-jssip&#xff0c;把点点滴滴都记录下来 到这里下载源码&#xff1a; https://github.com/versatica/tryit-jssip安装nodejs v18&#xff0c;其它版本暂时没试过 npm install --legacy-peer-deps && npm install -…
阅读更多...
最新文章

Copyright @ 2022~2023