本文是仿微信聊天程序专栏的第七篇文章,主要记录了【好友信息】的界面实现。
界面设计
这里的好友信息界面没有处理复杂的功能,仅仅显示好友信息,支持在此界面中发起聊天而已,总体的界面设计如下图所示:
界面布局
好友信息仅仅只是信息展示,布局相对比较简单,这里采用VBox和HBox组合使用的方式,完整的布局fxml代码如下:
<VBox prefHeight="610.0" prefWidth="546.0" styleClass="profile-pane" stylesheets="@ContactsProfileController.css" xmlns:fx="http://javafx.com/fxml" fx:controller="michong.javafx.wx.view.contacts.ContactsProfileController"> <children> <HBox alignment="CENTER" spacing="20.0" VBox.vgrow="ALWAYS"> <children> <VBox alignment="CENTER_LEFT" spacing="5.0" HBox.hgrow="ALWAYS"> <children> <Label fx:id="nicknameLabel" style="-fx-font-size: 26px;"/> <Label styleClass="autograph-label" text="微信小程序搜一搜: Coding鱼塘"/> </children> </VBox> <ImageView fx:id="avatarImageView" fitHeight="60.0" fitWidth="60.0"/> </children> <padding> <Insets bottom="100.0" left="100.0" right="100.0" top="30.0"/> </padding> </HBox> <Separator> <padding> <Insets left="100.0" right="100.0"/> </padding> <VBox.margin> <Insets top="50.0"/> </VBox.margin> </Separator> <StackPane prefHeight="200.0"> <children> <Button styleClass="send-message-button" text="发消息" onAction="#onSendMessageClick"/> </children> </StackPane> </children> </VBox>
样式美化
好友信息界面的样式美化主要针对按钮,相对比较简单,完整的CSS代码如下:
.profile-pane { -fx-background-color: #fafafa; } .autograph-label { -fx-font-size: 14px; -fx-text-fill: #c0c0c0; } .send-message-button { -fx-padding: 10px 40px; -fx-font-size: 14px; -fx-text-fill: #fff; -fx-fill: #fff; -fx-background-color: #5cb85c; -fx-border-color: #4cae4c; } .send-message-button:hover { -fx-cursor: hand; -fx-background-color: #449d44; -fx-border-color: #398439; }
逻辑控制
调整原来好友列表的事件控制逻辑,当单击好友列表项时显示好友信息界面,这里只是静态显示,动态拉取好友信息后续功能将继续完善,控制代码如下:
void initializeEvent() { contactsListView.getSelectionModel().selectedItemProperty().addListener((obj, ov, nv) -> { if (Objects.nonNull(nv)) { Pane main = FXComponent.mainComponent(); main.getChildren().clear(); main.getChildren().add(FXComponent.contactsProfileComponent(nv.getId())); } }); }
数据填充
在逻辑控制部分加载界面的时候会传入好友的ID,在Controller中可以拉去这个好友的信息,这里需要用到Controller传值,所以自定义了一个UserDataController接口:
/** * @author michong */ public interface UserDataController { void initialize(Object data); }
好友信息的Controller实现这个接口,根据不同的ID显示不用的用户信息:
/** * @author michong */ public class ContactsProfileController implements UserDataController { public ImageView avatarImageView; public Label nicknameLabel; private Long contactsId; @Override public void initialize(Object data) { contactsId = (Long) data; initializeUI(); initializeEvent(); renderDebugData(); } void initializeUI() { } void initializeEvent() { } void renderDebugData() { nicknameLabel.setText("WxID: " + contactsId); avatarImageView.setImage(FXAvatar.def()); } public void onSendMessageClick(ActionEvent actionEvent) { } }
支持传参
FX新增支持传参数的fxml.Controller加载方法:
public static Parent fxml(Class<? extends UserDataController> controller, Object data) { String uri = "/" + controller.getName().replace(".", "/") + ".fxml"; try { FXMLLoader loader = new FXMLLoader(Objects.requireNonNull(controller.getResource(uri))); Parent root = loader.load(); UserDataController ctrl = loader.getController(); ctrl.initialize(data); return root; } catch (IOException e) { throw new RuntimeException(e); } }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~