随笔 - 59,  文章 - 1,  评论 - 0,  阅读 - 24038

本文是仿微信聊天程序专栏的第七篇文章,主要记录了【好友信息】的界面实现。

界面设计

这里的好友信息界面没有处理复杂的功能,仅仅显示好友信息,支持在此界面中发起聊天而已,总体的界面设计如下图所示:

界面布局

好友信息仅仅只是信息展示,布局相对比较简单,这里采用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);
}
}
posted on   $$X$$  阅读(35)  评论(0编辑  收藏  举报
(评论功能已被禁用)
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~

点击右上角即可分享
微信分享提示