Cập nhật: rà soát chặt chẽ của các nút kết quả, thiết lập hình dạng giống như trong câu trả lời José dường như làm việc tốt hơn trên các nút rất nhỏ so với thiết lập -fx-background-radius như được sử dụng trong câu trả lời này, (nút kết quả trông tròn hơn một chút khi hình dạng được đặt). Vì vậy, giải pháp ở đây có lẽ tốt nhất cho các nút lớn hơn (ví dụ: 10px trở lên), trong khi đặt hình dạng có lẽ là tốt nhất cho một nút cực nhỏ 3px (đó là một sự khác biệt khá tinh tế).
3px là rất nút nhỏ. Tôi không chắc chắn làm thế nào bạn mong đợi mọi người bấm vào nó.
Bạn có thể sử dụng CSS bằng cách sử dụng CSS.
Đây là một nút hình tròn kích thước 30px:
Và yêu cầu nút kích thước 3px của bạn:
Các tròn được thực hiện bằng cách thiết lập một giá trị lớn để -fx-background-radius.
Ảnh chụp màn hình được chụp trên máy quét võng mạc, vì vậy chúng gấp đôi kích thước của bản gốc.
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class Rounding extends Application {
@Override
public void start(Stage stage) throws Exception {
Button roundButton = new Button();
roundButton.setStyle(
"-fx-background-radius: 5em; " +
"-fx-min-width: 3px; " +
"-fx-min-height: 3px; " +
"-fx-max-width: 3px; " +
"-fx-max-height: 3px;"
);
StackPane layout = new StackPane(
roundButton
);
layout.setPadding(new Insets(10));
stage.setScene(new Scene(layout));
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
Lưu ý rằng nút được hiển thị với các lớp nền. Lớp bên trong là nút thực tế và bên ngoài là một vòng lấy nét và ánh sáng nhẹ. Vì vậy, với nhau, nó thực sự có thể lớn hơn một chút so với 3px. Nếu bạn muốn nhận được 3px chính xác, bạn sẽ cần phải loại bỏ các tập trung nền insets. Một cái gì đó như dưới đây:
roundButton.setStyle(
"-fx-background-radius: 5em; " +
"-fx-min-width: 3px; " +
"-fx-min-height: 3px; " +
"-fx-max-width: 3px; " +
"-fx-max-height: 3px; " +
"-fx-background-color: -fx-body-color;" +
"-fx-background-insets: 0px; " +
"-fx-padding: 0px;"
);
Các phong cách inline chỉ sử dụng ở đây để cho phép mẫu có quy mô nhỏ và khép kín. Trong một ứng dụng thực tế, bạn sẽ đặt các kiểu trong một bảng định kiểu stylesheet.
Ý tưởng sử dụng -fx-background-radius để làm tròn nút đến từ việc triển khai các nút radio tròn trong bảng định kiểu modena.css JavaFX mặc định. Bạn có thể tìm thấy biểu định kiểu bằng cách xem bên trong tệp jfxrt.jar bao gồm mã và tài nguyên JavaFX.
Để so sánh, đây là hình ảnh của một nút tạo ra bằng cách sử dụng giải pháp Vòng hình dạng như trong câu trả lời của José:
tại sao vẫn cần phải thiết lập minSize() .....
Vì JavaFX đang cố gắng cung cấp mặc định hợp lý. Nếu không có kích thước tối thiểu mặc định cho một nút trống, khi bạn thay đổi kích thước cảnh của mình nhỏ hơn, một số nút sẽ biến mất và người dùng sẽ không thể nhấp vào chúng - đó sẽ là trải nghiệm người dùng rất xấu. Vì vậy, kích thước tối thiểu mặc định là khoảng 1em, cộng với một số đệm (ví dụ: chỉ lớn hơn một ký tự), mặc dù không có văn bản nào được đặt trên nút. Tuy nhiên, nó chỉ là một thiết lập mặc định bởi hệ thống Java vì nó không thể thực sự biết chính xác những gì ứng dụng của bạn muốn. Khi các giá trị mặc định không hoạt động cho tình huống của bạn, hãy ghi đè chúng hoặc cung cấp các gợi ý bổ sung như đặt rõ ràng kích thước tối thiểu của điều khiển.
"5em" có nghĩa là gì?
Xem JavaFX 8 css reference guide:
em: các 'font-size' của phông chữ liên quan
Vì vậy, 5em nghĩa 5 lần so với kích thước phông chữ. Hầu hết các kích thước cho các điều khiển trong biểu định kiểu JavaFX mặc định được xác định bằng cách sử dụng các đơn vị em. Bằng cách đó, khi bạn thay đổi phông chữ hoặc kích thước phông chữ, thì giao diện người dùng cân đối một cách duyên dáng để chứa phông chữ lớn hơn hoặc nhỏ hơn. Trong trường hợp cụ thể này, sự lựa chọn của 5em khá tùy ý, tôi chỉ muốn có một giá trị lớn để nút đó hoàn toàn tròn, nếu không thì -fx-background-radius sẽ tạo hình chữ nhật với các góc tròn, chứ không phải là một vòng tròn hoàn chỉnh. Bằng cách đảm bảo rằng kích thước bán kính được chuyển đến -fx-background-radius lớn hơn một nửa kích thước của điều khiển, khi đó điều khiển sẽ xuất hiện trên một vòng tròn tròn.
Tôi biết điều này hơi khó hiểu và không trực quan. Tôi vừa sao chép khái niệm này từ biểu định kiểu JavaFX mặc định với ý tưởng rằng, dù nó có thể gây nhầm lẫn, nó có lẽ là cách thực hành tốt nhất để đạt được các loại hiệu ứng này hoặc nó sẽ không được sử dụng trong biểu định kiểu mặc định.
Chủ yếu là lợi thế mà tôi có thể thấy trong cách tiếp cận này là không cần mã, tất cả kiểu dáng có thể được thực hiện trực tiếp trong CSS (để bạn có thể thay đổi giao diện mà không cần sửa đổi mã Java) và nếu muốn, bạn có thể chỉ định phối hợp trong các đơn vị em, để kiểm soát quy mô với kích thước phông chữ của bạn. Vì vậy, có một số lý do đằng sau sự điên rồ rõ ràng.
Hoạt động. Java khó hiểu. tại sao vẫn cần phải thiết lập minSize() .....
"5em" có nghĩa là gì? – Yvainovski