06_Flutter自定义锚点分类列表

2024-05-01 01:44

本文主要是介绍06_Flutter自定义锚点分类列表,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

06_Flutter自定义锚点分类列表

在这里插入图片描述

这样的效果,大家在一些商超应用里,应该也看到过。接下来咱们就用Flutter一步一步的来实现。

一.自定义属性抽取

在这里插入图片描述

  • categoryWidth: 左侧边栏的宽度,右侧区域的宽度填充剩余空间即可。
  • itemCount: 总共有多少个分类项,也就是左侧边栏中有多少个字项。
  • sticky: 滑动过程中,右侧标题是否吸顶。
  • controller: 外部通过controller可以控制左侧边栏中子项的选中以及右侧列表滑动位置的联动,同时监听选中状态。
  • categoryItemBuilder: 创建左侧边栏中的每一个分类项。
  • sectionItemBuilder: 创建右侧滑动列表中的每一个标题项。
  • sectionOfChildrenBuilder: 创建右侧滑动列表中的每一个标题项对应的子列表
class AnchorCategoryController extends ChangeNotifier {int selectedIndex = 0;void selectTo(int value) {selectedIndex = value;notifyListeners();}void dispose() {selectedIndex = 0;super.dispose();}
}class _HomePageState extends State<HomePage> {final List<String> _sections = ["标题1", "标题2", "标题3", "标题4", "标题5", "标题6", "标题7", "标题8", "标题9", "标题10"];final List<List<String>> _childrenList = [["item1", "item2", "item3", "item4", "item5"],["item1", "item2", "item3"],["item1", "item2", "item3", "item4"],["item1"],["item1", "item2"],["item1", "item2", "item3", "item4", "item5", "item6"],["item1", "item2", "item3", "item4"],["item1", "item2", "item3", "item4", "item5"],["item1", "item2", "item3"],["item1", "item2", "item3", "item4", "item5"]];int _selectedSectionsIndex = 0;final AnchorCategoryController _controller = AnchorCategoryController();void initState() {super.initState();_controller.addListener(_onCategoryChanged);}void _onCategoryChanged() {setState(() {_selectedSectionsIndex = _controller.selectedIndex;});}void dispose() {_controller.removeListener(_onCategoryChanged);_controller.dispose();super.dispose();}Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(widget.title),),body: SafeArea(child: AnchorCategoryList(controller: _controller,itemCount: _sections.length,sticky: true,categoryItemBuilder: (BuildContext context, int index) {return AlphaButton(onTap: () {_controller.selectTo(index);},child: Container(padding: const EdgeInsets.all(10),color: _selectedSectionsIndex == index ? const Color(0xFFFFFFFF): const Color(0xFFF2F2F2),child: Text(_sections[index]),),);},sectionItemBuilder: (BuildContext context, int index) {return Container(padding: const EdgeInsets.symmetric(vertical: 10),alignment: Alignment.centerLeft,color: const Color(0xFFF2F2F2),child: Text(_sections[index]),);},sectionOfChildrenBuilder: (BuildContext context, int index) {return List<Widget>.generate(_childrenList[index].length, (childIndex) {return Container(padding: const EdgeInsets.symmetric(vertical: 10),alignment: Alignment.centerLeft,child: Text(_childrenList[index][childIndex]),);});},)));}
}
二.组件基本布局
class AnchorCategoryList extends StatefulWidget {final double categoryWidth;final int itemCount;final IndexedWidgetBuilder categoryItemBuilder;final IndexedWidgetBuilder sectionItemBuilder;final IndexedWidgetListBuilder sectionOfChildrenBuilder;final bool sticky;final AnchorCategoryController? controller;const AnchorCategoryList({super.key,required this.categoryItemBuilder,required this.sectionItemBuilder,required this.sectionOfChildrenBuilder,this.controller,double? categoryWidth,int? itemCount,bool? sticky}): categoryWidth = categoryWidth ?? 112,itemCount = itemCount ?? 0,sticky = sticky ?? true;State<StatefulWidget> createState() => _AnchorCategoryListState();}class _AnchorCategoryListState extends State<AnchorCategoryList> {Widget build(BuildContext context) {return Row(mainAxisSize: MainAxisSize.max,mainAxisAlignment: MainAxisAlignment.start,crossAxisAlignment: CrossAxisAlignment.stretch,children: [SizedBox(width: widget.categoryWidth,child: LayoutBuilder(builder: (context, viewportConstraints) {return SingleChildScrollView(child: ConstrainedBox(constraints: BoxConstraints(minHeight: viewportConstraints.maxHeight != double.infinity ? viewportConstraints.maxHeight:0),child: Column(mainAxisSize: MainAxisSize.max,mainAxisAlignment: MainAxisAlignment.start,crossAxisAlignment: CrossAxisAlignment.stretch,children: List.generate(widget.itemCount, (index) {return widget.categoryItemBuilder.call(context, index);}),),),);},)),Expanded(child: CustomScrollView(physics: const ClampingScrollPhysics(),slivers: [...(List<Widget>.generate(widget.itemCount * 2, (allIndex) {int index = allIndex ~/ 2;if(allIndex.isEven) {//sectionreturn SliverToBoxAdapter(child: widget.sectionItemBuilder.call(context, index),);} else {//childrenreturn SliverToBoxAdapter(child: Column(children: widget.sectionOfChildrenBuilder.call(context, index),),);}})),]))],);}}
三.获取并保存标题项、标题项对应子列表的高度

这里获取标题项、标题项对应子列表的高度,需要等到控件build完成后,才能获取到,因此需要自定义一个控件继承SingleChildRenderObjectWidget,并指定一个自定义的RenderBox,在performLayout中通过回调通知外部,控件layout完成了

typedef AfterLayoutCallback = Function(RenderBox ral);class AfterLayout extends SingleChildRenderObjectWidget {final AfterLayoutCallback callback;const AfterLayout({Key? key,required this.callback,Widget? child,}) : super(key: key, child: child);RenderObject createRenderObject(BuildContext context) {return RenderAfterLayout(callback);}void updateRenderObject(context, RenderAfterLayout renderObject) {renderObject.callback = callback;}
}class RenderAfterLayout extends RenderProxyBox {AfterLayoutCallback callback;RenderAfterLayout(this.callback);void performLayout() {super.performLayout();SchedulerBinding.instance.addPostFrameCallback((timeStamp) => callback(this));}}

使用AfterLayout获取并保存标题项、标题项对应子列表的高度


Widget build(BuildContext context) {return Row(mainAxisSize: MainAxisSize.max,mainAxisAlignment: MainAxisAlignment.start,crossAxisAlignment: CrossAxisAlignment.stretch,children: [SizedBox(width: widget.categoryWidth,child: LayoutBuilder(builder: (context, viewportConstraints) {return SingleChildScrollView(child: ConstrainedBox(constraints: BoxConstraints(minHeight: viewportConstraints.maxHeight != double.infinity ? viewportConstraints.maxHeight:0),child: Column(mainAxisSize: MainAxisSize.max,mainAxisAlignment: MainAxisAlignment.start,crossAxisAlignment: CrossAxisAlignment.stretch,children: List.generate(widget.itemCount, (index) {return widget.categoryItemBuilder.call(context, index);}),),),);},)),Expanded(child: CustomScrollView(physics: const ClampingScrollPhysics(),slivers: [...(List<Widget>.generate(widget.itemCount * 2, (allIndex) {int index = allIndex ~/ 2;if(allIndex.isEven) {//sectionreturn SliverToBoxAdapter(child: AfterLayout(callback: (renderBox) {double height = renderBox.size.height;setState(() {if(_sectionHeightList.length > index) {_sectionHeightList[index] = height;} else {_sectionHeightList.add(height);}});},child: widget.sectionItemBuilder.call(context, index),),);} else {//childrenreturn SliverToBoxAdapter(child: AfterLayout(callback: (renderBox) {double height = renderBox.size.height;setState(() {if(_childrenHeightList.length > index) {_childrenHeightList[index] = height;} else {_childrenHeightList.add(height);}});},child: Column(children: widget.sectionOfChildrenBuilder.call(context, index),),),);}})),]))],);
}

计算并保存右侧面板每一项选中时的初始滑动偏移量

在这里插入图片描述


Widget build(BuildContext context) {return Row(mainAxisSize: MainAxisSize.max,mainAxisAlignment: MainAxisAlignment.start,crossAxisAlignment: CrossAxisAlignment.stretch,children: [SizedBox(width: widget.categoryWidth,child: LayoutBuilder(builder: (context, viewportConstraints) {return SingleChildScrollView(child: ConstrainedBox(constraints: BoxConstraints(minHeight: viewportConstraints.maxHeight != double.infinity ? viewportConstraints.maxHeight:0),child: Column(mainAxisSize: MainAxisSize.max,mainAxisAlignment: MainAxisAlignment.start,crossAxisAlignment: CrossAxisAlignment.stretch,children: List.generate(widget.itemCount, (index) {return widget.categoryItemBuilder.call(context, index);}),),),);},)),Expanded(child: AfterLayout(callback: (renderBox) {setState(() {for(int i = 0; i < widget.itemCount; i ++) {double scrollOffset = 0;for(int j=0; j<i; j++) {scrollOffset += _sectionHeightList[j] + _childrenHeightList[j];}if(_scrollOffsetList.length > i) {_scrollOffsetList[i] = scrollOffset;} else {_scrollOffsetList.add(scrollOffset);}}debugPrint("CustomScrollView AfterLayout: $_scrollOffsetList");});},child: CustomScrollView(physics: const ClampingScrollPhysics(),slivers: [...(List<Widget>.generate(widget.itemCount * 2, (allIndex) {int index = allIndex ~/ 2;if(allIndex.isEven) {//sectionreturn SliverToBoxAdapter(child: AfterLayout(callback: (renderBox) {double height = renderBox.size.height;setState(() {if(_sectionHeightList.length > index) {_sectionHeightList[index] = height;} else {_sectionHeightList.add(height);}});},child: widget.sectionItemBuilder.call(context, index),),);} else {//childrenreturn SliverToBoxAdapter(child: AfterLayout(callback: (renderBox) {double height = renderBox.size.height;setState(() {if(_childrenHeightList.length > index) {_childrenHeightList[index] = height;} else {_childrenHeightList.add(height);}});},child: Column(children: widget.sectionOfChildrenBuilder.call(context, index),),),);}})),]),))],);
}
四.点击选中分类项时,右侧自动滑动至相应位置

首先,这里需要把右侧列表最后一项的高度设置为ViewPort的高度,保证最后能够滑动到最后一项。只需要在右侧列表添加一个空白区域即可。


Widget build(BuildContext context) {return Row(mainAxisSize: MainAxisSize.max,mainAxisAlignment: MainAxisAlignment.start,crossAxisAlignment: CrossAxisAlignment.stretch,children: [...,Expanded(child: AfterLayout(callback: (renderBox) {setState(() {...if(widget.itemCount > 0) {_extraHeight = max(renderBox.size.height - _childrenHeightList[widget.itemCount - 1], 0);} else {_extraHeight = 0;}});},child: CustomScrollView(physics: const ClampingScrollPhysics(),slivers: [...,SliverToBoxAdapter(child: SizedBox(height: _extraHeight,),)]),))],);
}

根据前面确定好初始的滑动偏移量之后,就能很方便的控制右侧列表的滑动了,我们通过给右侧列表指定ScrollController,同时调用ScrollController的animateTo(double offset, {required Duration duration, required Curve curve})方法即可。

class _AnchorCategoryListState extends State<AnchorCategoryList> {...final ScrollController _scrollController = ScrollController();int _selectedIndex = 0;bool _scrollLocked = false;void initState() {super.initState();if(widget.controller != null) {widget.controller!.addListener(_onIndexChange);}}void _onIndexChange() {if(_selectedIndex == widget.controller!.selectedIndex) {return;}_scrollLocked = true;_selectedIndex = widget.controller!.selectedIndex;widget.controller!.selectTo(_selectedIndex);_scrollController.animateTo(_scrollOffsetList[widget.controller!.selectedIndex],duration: const Duration(milliseconds: 300),curve: Curves.linear).then((value) {_scrollLocked = false;});}void dispose() {_scrollController.dispose();if(widget.controller != null) {widget.controller!.removeListener(_onIndexChange);}super.dispose();}Widget build(BuildContext context) {return Row(mainAxisSize: MainAxisSize.max,mainAxisAlignment: MainAxisAlignment.start,crossAxisAlignment: CrossAxisAlignment.stretch,children: [...,Expanded(child: AfterLayout(callback: (renderBox) {setState(() {for(int i = 0; i < widget.itemCount; i ++) {double scrollOffset = 0;for(int j=0; j<i; j++) {scrollOffset += _sectionHeightList[j] + _childrenHeightList[j];}if(_scrollOffsetList.length > i) {_scrollOffsetList[i] = scrollOffset;} else {_scrollOffsetList.add(scrollOffset);}}if(widget.itemCount > 0) {_extraHeight = max(renderBox.size.height - _childrenHeightList[widget.itemCount - 1], 0);} else {_extraHeight = 0;}});},child: CustomScrollView(physics: const ClampingScrollPhysics(),controller: _scrollController,slivers: [...]),))],);}}

在这里插入图片描述

五.右侧列表滚动时,动态改变左侧边栏的选中状态

监听右侧列表的滑动,获取滑动位置,与所有子项的初始滑动偏移量对比,可以计算出左侧边栏的哪一个子项应该被选中,然后通过AnchorCategoryController的selectTo(int value)方法更新选中状态即可。

class _AnchorCategoryListState extends State<AnchorCategoryList> {...void initState() {super.initState();if(widget.controller != null) {widget.controller!.addListener(_onIndexChange);}_scrollController.addListener(_onScrollChange);}...void _onScrollChange() {if(_scrollLocked) {return;}double scrollOffset = _scrollController.offset;int selectedIndex = 0;for(int index = _scrollOffsetList.length - 1; index >= 0; index --) {selectedIndex = index;if(scrollOffset.roundToDouble() >= _scrollOffsetList[index]) {break;}}if(_selectedIndex != selectedIndex) {_selectedIndex = selectedIndex;widget.controller!.selectTo(selectedIndex);}}void dispose() {_scrollController.removeListener(_onScrollChange);_scrollController.dispose();if(widget.controller != null) {widget.controller!.removeListener(_onIndexChange);}super.dispose();}...}
六.控制标题项吸顶

将标题项的SliverToBoxAdapter替换成StickySliverToBoxAdapter即可,关于StickySliverToBoxAdapter可以查看这篇文章02_Flutter自定义Sliver组件实现分组列表吸顶效果。

class _AnchorCategoryListState extends State<AnchorCategoryList> {...Widget build(BuildContext context) {return Row(mainAxisSize: MainAxisSize.max,mainAxisAlignment: MainAxisAlignment.start,crossAxisAlignment: CrossAxisAlignment.stretch,children: [...,Expanded(child: AfterLayout(callback: (renderBox) {...},child: CustomScrollView(physics: const ClampingScrollPhysics(),controller: _scrollController,slivers: [...(List<Widget>.generate(widget.itemCount * 2, (allIndex) {int index = allIndex ~/ 2;if(allIndex.isEven) {//sectionWidget sectionItem = AfterLayout(callback: (renderBox) {double height = renderBox.size.height;setState(() {if(_sectionHeightList.length > index) {_sectionHeightList[index] = height;} else {_sectionHeightList.add(height);}});},child: widget.sectionItemBuilder.call(context, index),);if(widget.sticky) {return StickySliverToBoxAdapter(child: sectionItem,);} else {return SliverToBoxAdapter(child: sectionItem,);}} else {//children...}})),...]),))],);}}

在这里插入图片描述

搞定,模拟器录屏掉帧了,改用真机录屏😄。

七.完整代码
typedef IndexedWidgetListBuilder = List<Widget> Function(BuildContext context, int index);class AnchorCategoryController extends ChangeNotifier {int selectedIndex = 0;void selectTo(int value) {selectedIndex = value;notifyListeners();}void dispose() {selectedIndex = 0;super.dispose();}
}class AnchorCategoryList extends StatefulWidget {final double categoryWidth;final int itemCount;final IndexedWidgetBuilder categoryItemBuilder;final IndexedWidgetBuilder sectionItemBuilder;final IndexedWidgetListBuilder sectionOfChildrenBuilder;final bool sticky;final AnchorCategoryController? controller;const AnchorCategoryList({super.key,required this.categoryItemBuilder,required this.sectionItemBuilder,required this.sectionOfChildrenBuilder,this.controller,double? categoryWidth,int? itemCount,bool? sticky}): categoryWidth = categoryWidth ?? 112,itemCount = itemCount ?? 0,sticky = sticky ?? true;State<StatefulWidget> createState() => _AnchorCategoryListState();}class _AnchorCategoryListState extends State<AnchorCategoryList> {final List<double> _sectionHeightList = [];final List<double> _childrenHeightList = [];final List<double> _scrollOffsetList = [];double _extraHeight = 0;final ScrollController _scrollController = ScrollController();int _selectedIndex = 0;bool _scrollLocked = false;void initState() {super.initState();if(widget.controller != null) {widget.controller!.addListener(_onIndexChange);}_scrollController.addListener(_onScrollChange);}void _onIndexChange() {if(_selectedIndex == widget.controller!.selectedIndex) {return;}_scrollLocked = true;_selectedIndex = widget.controller!.selectedIndex;widget.controller!.selectTo(_selectedIndex);_scrollController.animateTo(_scrollOffsetList[widget.controller!.selectedIndex],duration: const Duration(milliseconds: 300),curve: Curves.linear).then((value) {_scrollLocked = false;});}void _onScrollChange() {if(_scrollLocked) {return;}double scrollOffset = _scrollController.offset;int selectedIndex = 0;for(int index = _scrollOffsetList.length - 1; index >= 0; index --) {selectedIndex = index;if(scrollOffset.roundToDouble() >= _scrollOffsetList[index]) {break;}}if(_selectedIndex != selectedIndex) {_selectedIndex = selectedIndex;widget.controller!.selectTo(selectedIndex);}}void dispose() {_scrollController.removeListener(_onScrollChange);_scrollController.dispose();if(widget.controller != null) {widget.controller!.removeListener(_onIndexChange);}super.dispose();}Widget build(BuildContext context) {return Row(mainAxisSize: MainAxisSize.max,mainAxisAlignment: MainAxisAlignment.start,crossAxisAlignment: CrossAxisAlignment.stretch,children: [SizedBox(width: widget.categoryWidth,child: LayoutBuilder(builder: (context, viewportConstraints) {return SingleChildScrollView(child: ConstrainedBox(constraints: BoxConstraints(minHeight: viewportConstraints.maxHeight != double.infinity ? viewportConstraints.maxHeight:0),child: Column(mainAxisSize: MainAxisSize.max,mainAxisAlignment: MainAxisAlignment.start,crossAxisAlignment: CrossAxisAlignment.stretch,children: List.generate(widget.itemCount, (index) {return widget.categoryItemBuilder.call(context, index);}),),),);},)),Expanded(child: AfterLayout(callback: (renderBox) {setState(() {for(int i = 0; i < widget.itemCount; i ++) {double scrollOffset = 0;for(int j=0; j<i; j++) {scrollOffset += _sectionHeightList[j] + _childrenHeightList[j];}if(_scrollOffsetList.length > i) {_scrollOffsetList[i] = scrollOffset;} else {_scrollOffsetList.add(scrollOffset);}}if(widget.itemCount > 0) {_extraHeight = max(renderBox.size.height - _childrenHeightList[widget.itemCount - 1], 0);} else {_extraHeight = 0;}});},child: CustomScrollView(physics: const ClampingScrollPhysics(),controller: _scrollController,slivers: [...(List<Widget>.generate(widget.itemCount * 2, (allIndex) {int index = allIndex ~/ 2;if(allIndex.isEven) {//sectionWidget sectionItem = AfterLayout(callback: (renderBox) {double height = renderBox.size.height;setState(() {if(_sectionHeightList.length > index) {_sectionHeightList[index] = height;} else {_sectionHeightList.add(height);}});},child: widget.sectionItemBuilder.call(context, index),);if(widget.sticky) {return StickySliverToBoxAdapter(child: sectionItem,);} else {return SliverToBoxAdapter(child: sectionItem,);}} else {//childrenreturn SliverToBoxAdapter(child: AfterLayout(callback: (renderBox) {double height = renderBox.size.height;setState(() {if(_childrenHeightList.length > index) {_childrenHeightList[index] = height;} else {_childrenHeightList.add(height);}});},child: Column(children: widget.sectionOfChildrenBuilder.call(context, index),),),);}})),SliverToBoxAdapter(child: SizedBox(height: _extraHeight,),)]),))],);}}

这篇关于06_Flutter自定义锚点分类列表的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/950434

相关文章

基于人工智能的图像分类系统

目录 引言项目背景环境准备 硬件要求软件安装与配置系统设计 系统架构关键技术代码示例 数据预处理模型训练模型预测应用场景结论 1. 引言 图像分类是计算机视觉中的一个重要任务,目标是自动识别图像中的对象类别。通过卷积神经网络(CNN)等深度学习技术,我们可以构建高效的图像分类系统,广泛应用于自动驾驶、医疗影像诊断、监控分析等领域。本文将介绍如何构建一个基于人工智能的图像分类系统,包括环境

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

认识、理解、分类——acm之搜索

普通搜索方法有两种:1、广度优先搜索;2、深度优先搜索; 更多搜索方法: 3、双向广度优先搜索; 4、启发式搜索(包括A*算法等); 搜索通常会用到的知识点:状态压缩(位压缩,利用hash思想压缩)。

06 C++Lambda表达式

lambda表达式的定义 没有显式模版形参的lambda表达式 [捕获] 前属性 (形参列表) 说明符 异常 后属性 尾随类型 约束 {函数体} 有显式模版形参的lambda表达式 [捕获] <模版形参> 模版约束 前属性 (形参列表) 说明符 异常 后属性 尾随类型 约束 {函数体} 含义 捕获:包含零个或者多个捕获符的逗号分隔列表 模板形参:用于泛型lambda提供个模板形参的名

Flutter 进阶:绘制加载动画

绘制加载动画:由小圆组成的大圆 1. 定义 LoadingScreen 类2. 实现 _LoadingScreenState 类3. 定义 LoadingPainter 类4. 总结 实现加载动画 我们需要定义两个类:LoadingScreen 和 LoadingPainter。LoadingScreen 负责控制动画的状态,而 LoadingPainter 则负责绘制动画。

自定义类型:结构体(续)

目录 一. 结构体的内存对齐 1.1 为什么存在内存对齐? 1.2 修改默认对齐数 二. 结构体传参 三. 结构体实现位段 一. 结构体的内存对齐 在前面的文章里我们已经讲过一部分的内存对齐的知识,并举出了两个例子,我们再举出两个例子继续说明: struct S3{double a;int b;char c;};int mian(){printf("%zd\n",s

c++的初始化列表与const成员

初始化列表与const成员 const成员 使用const修饰的类、结构、联合的成员变量,在类对象创建完成前一定要初始化。 不能在构造函数中初始化const成员,因为执行构造函数时,类对象已经创建完成,只有类对象创建完成才能调用成员函数,构造函数虽然特殊但也是成员函数。 在定义const成员时进行初始化,该语法只有在C11语法标准下才支持。 初始化列表 在构造函数小括号后面,主要用于给

Spring 源码解读:自定义实现Bean定义的注册与解析

引言 在Spring框架中,Bean的注册与解析是整个依赖注入流程的核心步骤。通过Bean定义,Spring容器知道如何创建、配置和管理每个Bean实例。本篇文章将通过实现一个简化版的Bean定义注册与解析机制,帮助你理解Spring框架背后的设计逻辑。我们还将对比Spring中的BeanDefinition和BeanDefinitionRegistry,以全面掌握Bean注册和解析的核心原理。

Spring+MyBatis+jeasyui 功能树列表

java代码@EnablePaging@RequestMapping(value = "/queryFunctionList.html")@ResponseBodypublic Map<String, Object> queryFunctionList() {String parentId = "";List<FunctionDisplay> tables = query(parent

Oracle type (自定义类型的使用)

oracle - type   type定义: oracle中自定义数据类型 oracle中有基本的数据类型,如number,varchar2,date,numeric,float....但有时候我们需要特殊的格式, 如将name定义为(firstname,lastname)的形式,我们想把这个作为一个表的一列看待,这时候就要我们自己定义一个数据类型 格式 :create or repla