首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JavaFX中一个ListView中的2个不同列表,由一个标头分割

JavaFX中的ListView是一个可滚动的列表视图,可以显示多个项目。在一个ListView中,可以使用标头将不同的列表分割开来。

标头是一个特殊的列表项,用于分隔不同的列表。它通常用于将相关的项目分组显示。标头可以是任何JavaFX节点,通常使用Label或Text来显示文本。

要在一个ListView中添加标头,可以通过在数据模型中插入特殊的标头对象来实现。这个标头对象可以是自定义的类,也可以是ListView的内置类Section。

以下是一个示例代码,演示如何在JavaFX中使用ListView和标头:

代码语言:txt
复制
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.ListView;
import javafx.scene.control.ListCell;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class ListViewWithHeadersExample extends Application {

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) {
        ListView<String> listView = new ListView<>();
        ObservableList<String> items = FXCollections.observableArrayList(
                "Apple", "Banana", "Cherry", "Grape", "Orange", "Strawberry"
        );

        // 添加标头
        Section fruitsSection = new Section("Fruits");
        fruitsSection.getStyleClass().add("section-header");
        fruitsSection.setExpanded(true);
        fruitsSection.getItems().addAll("Apple", "Banana", "Cherry");

        Section otherSection = new Section("Other");
        otherSection.getStyleClass().add("section-header");
        otherSection.getItems().addAll("Grape", "Orange", "Strawberry");

        items.addAll(fruitsSection, otherSection);

        listView.setItems(items);

        // 自定义列表项的显示
        listView.setCellFactory(param -> new ListCell<>() {
            @Override
            protected void updateItem(String item, boolean empty) {
                super.updateItem(item, empty);
                if (item == null || empty) {
                    setText(null);
                } else if (item instanceof Section) {
                    setText(((Section) item).getTitle());
                    getStyleClass().add("section-header");
                } else {
                    setText(item);
                    getStyleClass().remove("section-header");
                }
            }
        });

        VBox root = new VBox(listView);
        Scene scene = new Scene(root, 200, 200);
        scene.getStylesheets().add("styles.css"); // 可选的样式表

        primaryStage.setScene(scene);
        primaryStage.show();
    }

    // 标头类
    private static class Section {
        private final String title;
        private final ObservableList<String> items;

        public Section(String title) {
            this.title = title;
            this.items = FXCollections.observableArrayList();
        }

        public String getTitle() {
            return title;
        }

        public ObservableList<String> getItems() {
            return items;
        }
    }
}

在上面的示例中,我们创建了一个ListView,并添加了两个标头(Fruits和Other)。每个标头下面都有一些项目。我们还使用了自定义的ListCell来显示标头和项目。

请注意,上述示例中的样式表(styles.css)是可选的,用于自定义标头的外观。你可以根据需要自定义样式。

这是一个基本的示例,你可以根据自己的需求进行扩展和修改。希望对你有帮助!

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

UITableView在Flutter中是什么?

ListView 在Flutter中,ListView可以沿一个方向(垂直或者水平方向)来排列其所有子Widget,因此常被用于需要展示一组连续视图元素的场景,比如通讯录、优惠券、商家列表等。...我定义了一个拥有100个列表元素的ListView,在列表项的创建方法中,分别将index的值设置为ListTile的标题与子标题。...在ListView中,有两种方式支持分割线: 一种是,在itemBuilder中,根据index的值动态创建分割线,也就是将分割线视为列表项的一部分; 另一种是,使用ListView的另一个构造方法,...以便根据 index 设置不同样式的分割线。...以一个有着封面头图的列表为例,我们希望封面头图和列表这两层视图的滚动联动起来,当用户滚动列表时,头图会根据用户的滚动手势,进行缩小与展开。

5.6K10

JavaFX 11发行说明

已添加两个新属性“initialDelay”和“repeatDelay”来配置此行为。 initialDelay:在下一个值步骤之前必须在箭头按钮上按下鼠标的持续时间。默认值现在为300毫秒。...repeatDelay:在第一个值步骤之后,每个连续步骤必须按下鼠标的持续时间。默认值现在为60毫秒。 有关更多信息,请参阅JDK-8167096。...默认情况下,独立的javafx模块不再具有权限 javafx.* 模块现在由应用程序类加载器加载,默认情况下不再具有权限。...新功能 以下注释描述了JavaFX 11中的一些增强功能。有关完整列表,请参阅发行说明末尾的表格。...使用JDK 10运行时,Swing interop需要合格的导出 要使用带有OpenJDK 10版本的JavaFX 11运行FX / Swing互操作应用程序,必须在java命令行中添加以下四个限定导出

6.7K60
  • Java FX制作小游戏

    Java FX制作小游戏在全栈学习Java中,了解如何使用Java FX创建图形化界面是很重要的一步。本篇文章将向您展示如何使用Java FX制作一个简单的小游戏。...按照以下步骤:打开您的IDE,并创建一个新的Java项目。在项目配置中,选择Java FX作为项目的库和框架。创建一个主类 Main ,它将成为我们游戏的入口点。...常用的布局类包括FlowPane、HBox、VBox、BorderPane、GridPane等。布局类可以根据不同的规则自动调整组件的位置和大小,以适应不同的窗口尺寸。...Control:Control是JavaFX中的控件类,用于构建用户界面上的可交互组件。常见的控件包括Button、Label、TextField、ComboBox、ListView等。...事件由事件源(Event Source)生成,并通过事件传播机制传递到事件目标(Event Target)进行处理。JavaFX中的事件可以是鼠标事件、键盘事件、焦点事件、动画事件等。

    43210

    JavaFX——(第一篇:介绍篇)

    一个场景中单独的元素叫节点。每一个节点都有一个ID,样式类和边界值。除了根结点外,每一个节点都有一个父结点并且有0到多个子节点。...图形系统 JavaFX 2的图形系统就是图1中标蓝的部分,是JavaFX场景图的具体实现。它即包括2-D也包括3-D场景。它提供对硬件渲染的软件优化。...还有和AWT不同的是,Glass Toolkit运行一个JavaFX线程而AWT运行一个线程、java运行一个线程。通过这种方式解决了很多问题。...内容浏览器由以下类组成: Web引擎提供基本的网页浏览功能。...浏览器:在这种方式下,JavaFX被嵌入到一个web页中自动加载,它能通过页面的javascript与页面上的元素进行交互。

    6.1K60

    【Android从零单排系列二十】《Android视图控件——ListView》

    功能:ListView可以在有限的屏幕空间内显示大量的数据,并支持用户滚动浏览。它提供了一个可滚动的列表容器,可以逐项地展示数据元素。...常用的适配器包括ArrayAdapter、CursorAdapter和BaseAdapter等。 布局:ListView的每个列表项通常由一个布局文件定义,用于指定列表项的外观和内容。...四 ListView简单Demo 以下是一个简单的ListView示例代码: 在XML布局文件中添加ListView控件(activity_main.xml): ListView xmlns:android...,你将看到一个包含水果列表的ListView界面。...这个简单的示例演示了如何使用ListView和ArrayAdapter来显示一个静态字符串数组。你可以根据需要修改数据源和列表项布局,以适应不同的情况。

    62310

    模仿微信,开发一个分布式IM(即时通信)系统!

    从小我就喜欢动手,就以一个即时通信的项目为例,已经基于不同技术方案实现了5、6次,仅为了实践技术,截图如下: [IM-2.png] 有些是刚学完Socket和Swing的时候,想动手试试这些技术能不能写个...从整体上看这是一个联动的过程,点击左侧的对话框用户,右侧就有相应内容的填充。那么右侧被填充对话列表 ListView 需要与每一个对话用户关联,点击聊天用户的时候,是通过反复切换填充的过程。...我们目前使用的方式是 fxml 设计,例如这部分是通用功能,可以抽取出来放到代码中,设计成一个组件元素类。...经过我们的分析,在使用 JavaFx 组件开发为基础下,这部分是一种嵌套 ListView,也就是最底层的面板是一个 ListView,好友和群组有各是一个 ListView,这样处理后我们会很方便的进行数据填充...那么在听到这样一个需求时候,Java程序员肯定会想到一些列的技术知识点来填充我们项目中的各个模块,例如;界面用JavaFx、Swing等,通信用Socket或者知道Netty框架、服务端控制用MVC模型加上

    1.6K30

    给学习加点实践,开发一个分布式IM(即时通信)系统!

    从小我就喜欢动手,就以一个即时通信的项目为例,已经基于不同技术方案实现了5、6次,仅为了实践技术,截图如下: 有些是刚学完Socket和Swing的时候,想动手试试这些技术能不能写个QQ出来。...从整体上看这是一个联动的过程,点击左侧的对话框用户,右侧就有相应内容的填充。那么右侧被填充对话列表 ListView 需要与每一个对话用户关联,点击聊天用户的时候,是通过反复切换填充的过程。...我们目前使用的方式是 fxml 设计,例如这部分是通用功能,可以抽取出来放到代码中,设计成一个组件元素类。...经过我们的分析,在使用 JavaFx 组件开发为基础下,这部分是一种嵌套 ListView,也就是最底层的面板是一个 ListView,好友和群组有各是一个 ListView,这样处理后我们会很方便的进行数据填充...那么在听到这样一个需求时候,Java程序员肯定会想到一些列的技术知识点来填充我们项目中的各个模块,例如;界面用JavaFx、Swing等,通信用Socket或者知道Netty框架、服务端控制用MVC模型加上

    90130

    RecyclerView还能这么玩

    从图 1 和图 2 可知,最外面的控件是支持上下滑动的。这很有可能是一个列表或者是一个 ScrollView 。头部是有 8 个控件以 4 x 2 的方阵排列着。...中间部分由 2 x 2 的控件组成一个矩形。底部是类似列表的样式。 2 实现思路 我第一想法就是使用 RecyclerView 进行嵌套。...3 代码实现 1)根据不同的 viewType 加载不同的布局。头部 8 个控件可以用统一布局文件来表示,中间 4 个控件也同样的原理,剩下底部也是采用一个 xml 文件来表示。 ?...我们把 RecycleView 分割为三个部分,这就需要在 MainActivity 中给 Adapter 传递三个不同泛型的 List。 ?...很简单,因为在整个列表中,在头部中一行有 4 个控件, 1 个控件占据 1 个span。我就以头部的数据为标准,这样比较方便计算出后面 item 中每个控件占据每行的 span 数。 ?

    68230

    Android开发:ListView、AdapterView、RecyclerView全面解析

    特征: AdapterView继承自ViewGroup,本质是个容器 AdapterView可以包含多个“列表项”,并将这多个列表项以合适的形式展示 AdapterView显示的列表项内容由Adapter...ListView简介 1. 什么是ListView 即列表视图,是Android开发中一种常用的视图组件 2. ListView的作用 将所要展示的数据集合起来 以列表的形式展示到用户界面上 3....试想下这么一个场景:如果把所有数据集合的信息都加载到View上,如果ListView要为每个数据都创建一个视图,那么会占用非常多的内存 从上面可知,ListView不会为每一个数据创建一个视图,为了节省空间和时间...工作原理:当屏幕需要显示x个item时,那么ListView只会创建x+1个视图,当第一个item离开屏幕时,此item的view就会被拿来重用(用于显示下一个item(即第x+1个)的内容)。...Listview提供的XML属性: XML属性 说明 备注 android:divider 设置List列表项的分隔条(可用颜色分割,也可用图片(Drawable)分割 不设置列表之间的分割线,可设置属性为

    3.5K30

    RecyclerView 必知必会

    比如有一个需求是屏幕竖着的时候的显示形式是ListView,屏幕横着的时候的显示形式是2列的GridView,此时如果用RecyclerView,则通过设置LayoutManager一行代码实现替换。...但事实上很多时候,我们只是更新了其中一个Item的数据,其他Item其实可以不需要重绘。 这里给出ListView实现局部更新的方法: ?...创建ViewHolder:在NormalAdapter中创建一个继承RecyclerView.ViewHolder的静态内部类,记为VH。...方法是:创建一个类并继承RecyclerView.ItemDecoration,重写以下两个方法: onDraw(): 绘制分割线。 getItemOffsets(): 设置分割线的宽、高。...ArrayList[] mScrapViews;: 每个Item Type对应一个列表作为回收站,缓存由于滚动而消失的View,此处的View如果被复用,会以参数的形式传给getView()

    4.2K90

    Flutter | 滚动组件,ListView,GridVIew等

    ,在 Flutter 中,术语 ViewPort (视口) ,如无特别说明,则是指一个 Widget 的实际显示区域; 例如,一个 ListView 的显示区域的高度是 800 像素,虽然其列表项总高度可能远远超过...组件中; 典型的,在一个懒加载的列表中,如果将列表包裹在 AutomaticKeepAlive 中,在改了吧划出视口时,他也不会被 GC 回收(垃圾回收),他会使用 KeepAliveNotification...ListView.separated 可以在生成的列表项之间添加一个分隔组件,他比 ListView.builder 多了个 sparatorBuilder 参数,该参数是一个分割组件生成器 栗子:基数下面添加红色下划线...,直接使用一个线性组件,第一个为标题的头,第二个是 listView 即可,如下: Column( children: [ Text("商品列表"), ListView.builder...的自动拉伸,效果如下: 总结 上面主要介绍了 ListView 的公共参数和构造函数,不同的构造对应了不同列表的生成模型,如果需要自定义列表生成模型,可以通过 ListView.custom 来定义

    8.7K20

    跟着源码学IM(九):基于Netty实现一套分布式IM系统

    从小我就喜欢动手,就以一个即时通信的项目为例,已经基于不同技术方案实现了5、6次,仅仅为了实践技术,截图如下。...那么右侧被填充对话列表 ListView 需要与每一个对话用户关联,点击聊天用户的时候,是通过反复切换填充的过程。效果如下图所示。...我们目前使用的方式是 fxml 设计,例如这部分是通用功能,可以抽取出来放到代码中,设计成一个组件元素类; 2)经过我们的分析,在使用 JavaFx 组件开发为基础下,这部分是一种嵌套 ListView...,也就是最底层的面板是一个 ListView,好友和群组有各是一个 ListView,这样处理后我们会很方便的进行数据填充; 3)另外这样的结构主要有利于在我们程序运行过程中,如果你添加了好友,那么我们需要将好友信息刷新到好友栏中...那么在听到这样一个需求时候,Java程序员肯定会想到一些列的技术知识点来填充我们项目中的各个模块(例如:界面用JavaFx、Swing等,通信用Socket或者知道Netty框架、服务端控制用MVC模型加上

    1.6K20

    一文搞懂HTTPProxy丨含基础、高级路由、服务韧性

    需要特别说明的是,在同一个 conditions 字段中以不同的列表项分别定义的多个头部条件彼此间存在“逻辑与”关系,这意味着请求报文需要同时满足头部条件的定义才能匹配到设置的规则。...在 conditions 字段中的同一个列表项中同时指定的header 和 prefix 之间是“与”关系,即报文必须同时满足两个条件,而不同列表项表达的筛选条件间为“与”关系,报文也需要同时满足其全部条件...仅满足规则一中的一个条件或者不能满足规则一中的任何条件的请求报文,将被路由到 demoapp 后端,如下面的 3 个测试命令及结果所示。...事实上,基于标头的流量分割算是“基于请求内容”灰度部署的一种实现,而流量分割则是“基于流量比例”进行灰度部署的方式。...以不存在“中间状态”的方式在两个后端服务间分割流量,要么完全在第一个服务上,要么一次性迁往第二个服务的配置机制即为蓝绿发布。 3. 流量镜像 流量镜像用于百分百地在两个服务间复制流量。

    80050

    Avalonia:可信创.NET 跨平台UI,让JAVA失业者转.NET信创开发!

    7.3 在Avalonia中实现MVVM 让我们通过一个简单的例子来说明如何在Avalonia中实现MVVM模式: 示例:创建一个简单的待办事项应用 7.3.1 Model 首先,我们定义一个简单的TodoItem...我们模拟了用户输入新的待办事项并点击添加按钮的操作,然后验证新的待办事项是否正确添加到了列表中。...部署 将Avalonia应用部署到不同平台是一个相对简单的过程,这要归功于.NET的跨平台特性。...以下是针对不同平台的部署步骤: 11.1 Windows 对于Windows平台,你可以使用以下命令创建一个自包含的可执行文件: dotnet publish -c Release -r win-x64...15.8 Avalonia.Diagnostics 这是一个用于Avalonia应用程序的运行时调试工具。它可以帮助你检查和修改运行中的UI元素,类似于Web开发中的开发者工具。

    2K20

    基础篇章:关于 React Native 之 ListView 组件的讲解

    大家好,我是ListView,我是React Native大家族中基础组件中,一个核心组件。我可以高效的展示垂直滚动的变化的数据列表,而且这个列表有一个特点就是结构和数据比较相似才可以哦。...我有两个必须的属性是dataSource和renderRow。dataSource是列表的数据源,而renderRow则逐个解析数据源中的数据,然后返回一个设定好格式的组件来渲染。...举个例子:我最基本的使用方式就是创建一个ListView.DataSource数据源,然后给它传递一个普通的数据数组,再使用数据源来实例化一个ListView组件,并且定义它的renderRow回调函数...,我当然还支持一些高级的特性,比如:给每组数组加一个粘节标题,也就是类似于通讯录中其首字母会在滑动过程中吸附在屏幕上方,支持页眉和页脚,也就是可以在列表中添加头部和尾部。...在每一次渲染过程中Footer(尾)该会一直在列表的底部,header(头)该会一直在列表的头部 renderHeader function 与上同理 renderRow function (rowData

    2K80

    JavaFX入门(四):JavaFX布局(一)

    当我们将一个控件拖拽到Pane中的时候,会自动生成layoutX和layoutY坐标。如图是使用Pane为父容器设计的一个简单界面: ? FXML代码如下: 的一个用例场景就是,软件主界面的上面是菜单栏和工具条,左边和右边可能是文档或者内容列表或者常用的工具集合,然后中间是主要内容显示区,下面是状态栏。...在SceneBuilder中我们将一个控件拖拽到BorderPane的时候,会有上下左右中的区域显示。 ? 我们在这5个区域放置5个标签,如下图: ? FXML代码如下: <?...GridPane GridPane有点像HTML中的Table布局,属于比较灵活的布局方式。默认情况下,控件均匀分布在Grid或者说Table中。但是我们可以指定一个控件所占的行列,让其跨行和列分布。...当我们将一个元素拖拽到GridPane中的时候可以看到SceneBuilder为我们虚拟除了行和列的分割线: ? 最后设计的界面如图所示: ? FXML代码如下: <?

    11.9K42

    Flutter 入门指北之滑动部件(超详细)

    如果需要实现一个垂直的滚动列表,可以直接通过 SingleChildScrollView 包裹 Column 来实现,列表内容全部塞到 Column 即可 class SingleChildScrollDemoPage...letters 不同而不同,这边就不贴效果图了,反正你可以看到一串列表......ExpansionTile 既然讲到了 ListView,在日常开发中,折叠列表也是一个比较常用的,所以这边要提下 ExpansionTile 这个部件,因为相对比较简单,所以直接上代码了 class...那么实现折叠列表也就是通过 ListView 创建一个 ExpansionTile 列表即可,先准备下模拟的数据 final _keys = ['ParentA', 'ParentB', 'ParentC...该部分代码查看 gridview_main.dart 文件 CustomScrollView 在平时的开发中,应该会遇到这么种情况,头部是一个 GridView 接下来拼接一些别的部件,然后再拼接一个列表

    2.5K30
    领券