Thành phần nút

Thuộc phần Lập trình hướng đối tượng trong hành trình Rust của Coddy. Bài học 51 trên 61.

Thử thách

Dễ

Hãy tiếp tục xây dựng Hệ thống tài liệu bằng cách thêm thành phần giao diện người dùng thứ hai: Button. Giống như TextField, thành phần này sẽ triển khai trait Draw, cho thấy các kiểu khác nhau có thể dùng chung một giao diện.

Bạn sẽ mở rộng dự án bằng một tệp module khác:

draw.rs: Giữ lại trait Draw từ các thử thách trước.
text_field.rs: Giữ lại cấu trúc TextField và phần triển khai Draw của nó.
button.rs: Tạo cấu trúc Button với hai trường công khai: label (kiểu String) và width (kiểu u32). Triển khai trait Draw cho Button để khi gọi draw(), chương trình in nút theo định dạng này: Button: {label} (width: {width})
main.rs: Đưa cả ba module vào. Tạo một TextField và một Button, sau đó gọi draw() cho từng thành phần để hiển thị cả hai.

Module button cần truy cập trait Draw bằng crate::draw::Draw, giống như bạn đã làm với TextField.

Chương trình sẽ nhận các đầu vào sau:

Dòng đầu tiên: nội dung của trường văn bản
Dòng thứ hai: nhãn của nút
Dòng thứ ba: chiều rộng của nút (dưới dạng số)

Đầu ra cần hiển thị trường văn bản trước, sau đó đến nút, mỗi thành phần trên một dòng riêng:

Text: Welcome
Button: Submit (width: 100)

Tự làm thử

mod draw;
mod text_field;
mod button;

use draw::Draw;
use text_field::TextField;
use button::Button;

pub struct Label {
    pub text: String,
}

impl Draw for Label {
    fn draw(&self) {
        println!("{}", self.text);
    }
}

fn main() {
    let mut input1 = String::new();
    std::io::stdin().read_line(&mut input1).expect("Failed to read line");
    let content = input1.trim().to_string();

    let mut input2 = String::new();
    std::io::stdin().read_line(&mut input2).expect("Failed to read line");
    let label = input2.trim().to_string();

    let mut input3 = String::new();
    std::io::stdin().read_line(&mut input3).expect("Failed to read line");
    let width: u32 = input3.trim().parse().expect("Failed to parse width");

    let text_field = TextField { content };
    text_field.draw();

    // TODO: Tạo Button với `label` và `width`, rồi gọi draw()
    
}