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

5.5K10

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.5K60

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事件可以是鼠标事件、键盘事件、焦点事件、动画事件等。

22710

RecyclerView使用详解(代替ListView

RecyclerView和item设置背景实现分割线或者在item布局添加view布局实现; 首先了解下RecyclerViewadapter: 和listviewadapter有所不同,在这里需要继承...控件(当一个View需要出现在屏幕上时,该方法会被回调,我们需要再该方法根据数据来更改视图) public void onBindViewHolder(final MyViewHolder holder..."+(position+1)+"张图片"); } }); 好了接下来了解下RecyclerView代替纵向listview分割线和上面一样,在item添加view实现分割线,点击事件同样是添加自定义监听...(MyRecyclerView),使用的话直接复制到项目中即可; 添加布局和脚布局方法也极为简单,和listview一样: //添加布局(必须在设置完布局管理器再添加布局和脚布局) View...SwipeRefreshLayout,这个在以前博客也有介绍,在此就不再重复了,不了解朋友可以了解一下 Android自定义ScrollView使用自定义监听 好了,剩下最后一个功能点,上拉加载更多

1.3K20

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

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

5.6K60

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

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

46810

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

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

86630

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

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

1.5K30

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 数。 ?

64830

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

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

3.4K30

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.1K90

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

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

72850

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.4K20

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

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

1.4K20

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

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

11.2K41

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

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

2K80

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

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

2.4K30
领券