I am using gtk-rs to build an application and currently I am having some trouble adjusting the width of the buttons when using StackSwitcher . I have tried using CSS for this as the gtk-rs book seems to imply but I just get an error stating No property named width
. I have an example of my method for building the stack switcher below:
use gtk::prelude::*;
use gtk::{ApplicationWindow};
use gtk::StackTransitionType::SlideLeftRight;
pub fn home_box(window: &ApplicationWindow) {
let container = gtk::Box::new(gtk::Orientation::Vertical, 100);
window.set_child(Some(&container));
let stack = gtk::Stack::new();
stack.set_transition_type(SlideLeftRight);
stack.set_transition_duration(200);
let home_label = gtk::Label::new(Some("Home"));
stack.add_titled(&home_label, Option::<&str>::None, "Home");
let label1 = gtk::Label::new(Some("placeholder"));
stack.add_titled(&label1, Option::<&str>::None, "placeholder");
let label2 = gtk::Label::new(Some("placeholder2"));
stack.add_titled(&label2, Option::<&str>::None, "placeholder2");
let label3 = gtk::Label::new(Some("Settings"));
let opt: Option<&str> = Some("Settings");
stack.add_titled(&label3, opt, "Settings");
let stack_switcher = gtk::StackSwitcher::new();
stack_switcher.set_stack(Some(&stack));
container.append(&stack_switcher);
container.append(&stack);
window.present();
}
I would like to reduce the width of the buttons when using StackSwitcher
. I would also like to have the buttons be at the bottom of the screen and not at the top. Gernally speaking I would like to know how to customize the appearance of this widget.
You can set up the.stack-switcher as shown on the page .
style.css
.stack-switcher button {
min-height: 22px;
min-width: 24px;
border: 0px;
background-color: #4d5261;
background-size: 16px 16px;
background-repeat: no-repeat;
background-position: center;
box-shadow: inset 0 0 0 1px blue;
}
.stack-switcher label {
border: 0px;
background-color: red;
background-size: 16px 16px;
background-repeat: no-repeat;
background-position: center;
box-shadow: inset 0 0 0 1px blue;
color: white;
}
main.rs
use gtk::prelude::*;
use gtk::{Application, ApplicationWindow, Button, Orientation};
use std::sync::{Arc, Mutex};
const APP_ID: &str = "org.gtk_rs.HelloWorld3";
fn main() {
let app = Application::builder().application_id(APP_ID).build();
app.connect_startup(|app| {
let provider = gtk::CssProvider::new();
let style = include_bytes!("style.css");
provider.load_from_data(style).expect("Failed to load CSS");
gtk::StyleContext::add_provider_for_screen(
&gdk::Screen::default().expect("Error initializing gtk css provider."),
&provider,
gtk::STYLE_PROVIDER_PRIORITY_APPLICATION,
);
build_ui(app);
});
app.run();
}
fn build_ui(app: &Application) {
let window = ApplicationWindow::builder()
.application(app)
.title("My GTK App")
.default_width(360)
.default_height(720)
.build();
let container = gtk::Box::new(gtk::Orientation::Vertical, 100);
window.add(&container);
let stack = gtk::Stack::new();
stack.set_transition_type(gtk::StackTransitionType::SlideLeftRight);
stack.set_transition_duration(200);
let home_label = gtk::Label::new(Some("Home"));
stack.add_titled(&home_label, "Home", "Home");
let label1 = gtk::Label::new(Some("placeholder"));
stack.add_titled(&label1, "placeholder", "placeholder");
let label2 = gtk::Label::new(Some("placeholder2"));
stack.add_titled(&label2, "placeholder2", "placeholder2");
let label3 = gtk::Label::new(Some("Settings"));
stack.add_titled(&label3, "Settings", "Settings");
let stack_switcher = gtk::StackSwitcher::new();
container.pack_start(&stack_switcher, false, false, 0);
stack_switcher.set_stack(Some(&stack));
container.add(&stack);
window.show_all();
window.present();
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.