思维导图 xTreeFlat

---

预览

介绍

平面树 / 思维导图。x-skia-u 绘制：App 整帧 SkiaRecorder 一次 renderFrame；节点 roundRect + fillTextBox；native-view 上手势覆盖层。大数据量时布局缓存子树高/宽与节点尺寸，连线按 id 索引；请保证各节点 id 全局唯一。

平台兼容

Harmony	H5	andriod	IOS	小程序	UTS	UNIAPP-X SDK	version
☑	☑	☑️	☑️	☑️	☑️	4.76+	1.1.18

文件路径

@/uni_modules/tmx-ui/components/x-tree-flat/x-tree-flat.uvue

使用

<x-tree-flat></x-tree-flat>

Props 属性

名称	说明	类型	默认值
canvasWidth	``	``	800
canvasHeight	``	``	800
width	``	``	'100%'
height	``	``	'600'
list	``	``	[] as XTREEFLAT_NODES[]
opts	``	``	() : XTreeFlatOpts null => { return null }
autoFit	``	``	true

Events 事件

名称	参数	说明
init	-	-
change	-	-
click	-	-

Slots 插槽

名称	说明	数据

Ref 方法

名称	参数	返回值	说明
setData	-	-	-
fitView	-	-	-

示例文件路径

/pages/qita/tree-flat

示例源码

uvue

<template>
	<!-- #ifdef MP-WEIXIN -->
	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
		<navigation-bar :background-color="xThemeConfigNavBgColor"
			:front-color="xThemeConfigNavFontColor"></navigation-bar>
	</page-meta>
	<!-- #endif -->
	<x-sheet>
		<x-text font-size="18" class=" text-weight-b mb-8">思维导图 xTreeFlat</x-text>
		<x-text color="#999999">
			这是一个横向布局的思维导图,可以用来展示结构或组织架构或流程,纯原生绘制,性能高
		</x-text>
		<x-radio-group class="mt-16" v-model="layout">
			<x-radio value="horizontal" class="mr-24" label="横向布局"></x-radio>
			<x-radio value="vertical" label="上下布局"></x-radio>
		</x-radio-group>
		<x-radio-group class="mt-12" v-model="lineType">
			<x-radio value="straight" class="mr-24" label="折线连接"></x-radio>
			<x-radio value="curve" label="曲线连接"></x-radio>
		</x-radio-group>
	</x-sheet>
	<view class="flex-1">
		<!-- :list="nodes"  -->
		<x-tree-flat :canvasWidth="1200" :opts="opts" ref="xmind" @init="oninit" height="100%"></x-tree-flat>
	</view>

</template>

<script setup>
	import { XTreeFlatOpts, XTREEFLAT_NODES } from '@/uni_modules/tmx-ui';
	import { TestFlatData } from "./mock.uts"
	const xmind = ref<XTreeFlatComponentPublicInstance | null>(null)
	const layout = ref<'horizontal' | 'vertical'>('horizontal')
	const lineType = ref<'straight' | 'curve'>('straight')
	const opts = computed(() : XTreeFlatOpts => {
		return { lineWidth: 2, layout: layout.value, lineType: lineType.value } as XTreeFlatOpts
	})
	const oninit = () => {
		console.warn("导图引擎启动成功，可以设置数据了")
		xmind.value!.setData(JSON.parseArray<XTREEFLAT_NODES>(TestFlatData)!)
	}
</script>

<style>
	/* #ifdef MP */
	page,
	body {
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	/* #endif */
</style>