rust 在gtk-rs中使用堆栈切换器时如何设置按钮的宽度

nukf8bse 于 2023-01-17 发布在其他

关注(0)|答案(1)|浏览(187)

我正在使用gtk-rs来构建一个应用程序，目前我在使用StackSwitcher时调整按钮的宽度时遇到了一些麻烦。我已经尝试过使用CSS来实现这一点，就像gtk-rs书中暗示的那样，但是我只是得到了一个错误，说明了No property named width。下面是我构建堆栈切换器的方法的一个例子：

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();
}

我想在使用StackSwitcher时减少按钮的宽度。我也想让按钮在屏幕的底部而不是顶部。一般来说，我想知道如何自定义这个小部件的外观。

rust

来源：https://stackoverflow.com/questions/75014285/how-do-i-set-the-width-of-buttons-when-using-stack-switcher-in-gtk-rs

1条答案

按热度按时间

x7rlezfr1#

您可以设置. stack-switcher，如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();
}

赞(0）回复(0）举报 2023-01-17

我来回答

rust 在gtk-rs中使用堆栈切换器时如何设置按钮的宽度

1条答案

示例

相关问题

热门标签

最新问答