SplitView
从上面效果图可以看到，我们将界面分为三个部分，这三个部分先是右边部分上下分割，然后将整个界面左右分割，HT 用封装好的 ht.widget.SplitView 进行界面的分割，然后将分割组件添加进底层...= new ht.widget.SplitView(gv1, gv2, 'v', 0.6);//分割组件 mainSplit = new ht.widget.SplitView(treeView,...splitView, 'h', 0.27); view = mainSplit.getView(); view.className = 'main'; document.body.appendChild...= new ht.widget.SplitView(gv1, gv2, 'v', 0.6);//分割组件 mainSplit = new ht.widget.SplitView(treeView,...splitView, 'h', 0.27); mainSplit.addToDOM(); 界面分配好之后我们就要对其添加内容了，界面的左边部分是 HT 封装的树组件，我在之前的文章写到过，树组件是一个非常方便的绘制树形关系的组件
学习本文，我们将实现如下几个小目标： 目标 #1: 可复用的 SplitView widget 我们将实现一个能在任何APP使用的自定义**SplitView widget**。...也就是说，我们需要将菜单和内容作为SplitView的参数，至于菜单和内容具体包含哪些，我们并不关心。...现在我们将MaterialApp的home参数替换成SplitView，我们将看到如下效果： Testing the split view 注意: 当屏幕大小改变时SplitView widget...{ const SplitView({ Key?...我们看看我们的widget tree 在 SplitView 中添加了Scaffold但是没有 AppBar .
说具体点，就拿官方的天气应用来说，左上角三条横杠的图标外加一个SplitView控件组成的这一导航模式就叫“汉堡菜单”。 ? ...手写 先分析一下界面的构成，暂时不看标题栏，由一个设置了 Canvas.ZIndex 的 Button 和一个 SplitView 构成。...SplitView.Pane 中又包含了两个ListView（一级菜单和二级菜单）。ListView 里的每个 Item 又由 Rectangle，FontIcon，TextBlock 组成。...> </SplitView.Content...navMenuPrimaryItem; NavMenuSecondaryListView.ItemsSource = navMenuSecondaryItem; // SplitView
这里再引入一个组件 ht.widget.SplitView，顾名思义“分割”组件。...通过 splitView = new ht.widget.SplitView( leftView, rightView, orientation, position )初始化构建一个分割组件对象。...= new ht.widget.TreeView(graphView.dm()); //树组件，参数为树组件绑定的数据模型，这里绑定的是 graphView 的数据模型，就可以进行数据共享 var splitView...= new ht.widget.SplitView(treeView, graphView, 'h', 0.2); //分割组件 （leftView, rightView, orientation,...position） splitView.addToDOM(); //将 splitView 添加进 body 中 记住，原代码中的 graphView.addToDOM 语句得注释掉，否则后面添加到 body
example_bookshelf.html 先来看下效果图： 从上面效果图可以看到，我们将界面分为三个部分，这三个部分先是右边部分上下分割，然后将整个界面左右分割，HT 用封装好的 ht.widget.SplitView...= new ht.widget.SplitView(gv1, gv2, 'v', 0.6);//分割组件 mainSplit = new ht.widget.SplitView(treeView,...splitView, 'h', 0.27); view = mainSplit.getView(); view.className = 'main'; document.body.appendChild...= new ht.widget.SplitView(gv1, gv2, 'v', 0.6);//分割组件 mainSplit = new ht.widget.SplitView(treeView,...splitView, 'h', 0.27); mainSplit.addToDOM(); 界面分配好之后我们就要对其添加内容了，界面的左边部分是 HT 封装的树组件，我在之前的文章写到过，树组件是一个非常方便的绘制树形关系的组件
= this.splitView = new ht.widget.SplitView(treeView, null, 'h', 280);// 分割组件，将场景分为左右两个部分，左边为树组件，右边为空...，左边的宽度为280，右边的组件先设置为空到时候根据具体情况分配 (http://www.hightopo.com/guide/guide/core/splitview/ht-splitview-guide.html...) this.splitView.addToDOM(); ?...布局结束记得将最外层组件的最底层 div 添加到 body 中，HT 的组件一般都会嵌入 BorderPane、SplitView 和 TabView 等容器中使用，而最外层的HT组件则需要用户手工将...= this.splitView = new ht.widget.SplitView(listBorder, borderPane, 'h', 220),// 分割组件 overview = this.overview
datamodel var tableView = createTable(formPane2, tablePane2, names);//表格组件 var leftView = new ht.widget.SplitView...(gv, tableView, 'v', 0.5);//左侧的上下分割 var splitView = new ht.widget.SplitView(leftView, propertyView);/.../将场景分为左右 splitView.addToDOM();//将分割好的场景添加进body体中 createTable 函数我们后面再讨论。...上面代码中 new 出来的部分都是 HT 封装好的组件，相当于“类”，这里解释一下 SplitView 分割组件，分割组件用于左右或上下分割两个子组件， 子组件可为 HT 框架提供的组件，也可为 HTML...这里我们用了两次 SplitView，目的是将场景分成三个部分。
1.3 IOS multitask(splitview) 适配 IOS multitask 是 iPad 提供给 app 进行多窗口交互的一个特性，这个特性可以极大增加办公效率，不需要频繁切换 app...multitask ( https://support.apple.com/en-us/HT207582 ) 默认情况下，我们在 iPad 上默认打开的 app 叫做 primary app，通过 splitView...由于两个 app 都是全屏打开，所以，对于全屏下的某些权限来说，primary app 独有某些权限： 拥有状态栏的控制权 （还有些权限不重要，就不说了 另外，splitView 主要针对的是 IOS...原生适配，如果想要嫁接到小程序或者 app 内应用去做的话，那可能就是 app 本身自己定义一套 splitView 规范。...不过，ipad 的 splitView 规范还是很有参考性的。 整体分配的比例如下： ?
linearLayout.addView( textView, LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT) ) val splitView...= getBottomSplitView() linearLayout.addView(splitView, getBottomSplitLayoutParams()) addView(linearLayout..., LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)) return splitView } private fun
listView = new ht.widget.ListView(dataModel); graphView = new ht.graph.GraphView(dataModel); splitView... = new ht.widget.SplitView(listView, graphView); textArea = new ht.widget.TextArea(); textArea.getElement...'normal'; textArea.getElement().style.color = '#777'; textArea.setEditable(false); new ht.widget.SplitView...(splitView, textArea, 'v').addToDOM(); new ht.layout.ForceLayout(graphView).start();
listView = new ht.widget.ListView(dataModel); graphView = new ht.graph.GraphView(dataModel); splitView...= new ht.widget.SplitView(listView, graphView); textArea = new ht.widget.TextArea(); textArea.getElement...textArea.getElement().style.color = '#777'; textArea.setEditable(false); new ht.widget.SplitView...(splitView, textArea, 'v').addToDOM(); new ht.layout.ForceLayout(graphView).start();
String> 东西 ...ListViewItem x:Name="thingCmd" Content="{StaticResource thing}"/> ... 然后： 主体框架控件已经设计完成，接下来我们就修改改造App
_page 写添加的页面 接着请看界面 splitview private void nagivate(
这是从ECharts官方Demo中拷贝下来的两个例子，其中在布局上用到了HT for Web的SplitView组件将两个chart以上下比例3：2分割。...在这个Demo中就整合了HT for Web的Tree组件，GraphView拓扑图组件和ECharts图形组件，并采用HT for Web的SplitView组件做布局。
我们又利用 HT 封装的 ht.widget.SplitView 分割组件将底部分为上下两个部分，最后将这个外边框 borderPane 添加进 body 体中： splitView = new ht.widget.SplitView...; borderPane = new ht.widget.BorderPane(); borderPane.setTopView(toolbar); borderPane.setCenterView(splitView
new ht.widget.Palette();//面板组件（http://hightopo.com/guide/guide/plugin/palette/ht-palette-guide.html） splitView...= new ht.widget.SplitView(palette, g3d, 'h', 0.2);//分割组件，第三个参数为分割的方式 h 为左右分，v 为上下分；第四个参数为分割比例，大于 1 的值为绝对宽度...，小于 1 则为比例 splitView.addToDOM();//将分割组件添加进 body 体中 关于这些组件的定义可以到对应的链接里面查看，至于将分割组件添加进 body 体中的 addToDOM...HT 的组件一般都会嵌入 BorderPane、SplitView 和 TabView 等容器中使用，而最外层的 HT 组件则需要用户手工将 getView() 返回的底层 div 元素添加到页面的 DOM...元素中，这里需要注意的是，当父容器大小变化时，如果父容器是 BorderPane 和 SplitView 等这些HT预定义的容器组件，则 HT 的容器会自动递归调用孩子组件 invalidate 函数通知更新
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
