直观

docs.rs 文档

lib.rs:

直观

直观是一个用于轻松创建文本用户界面（TUI）的组件库。

它深受 React 和 SwiftUI 的启发，包含类似于功能组件、钩子和声明式DSL的功能。

以下是 入门指南，简要介绍了如何使用直观。

设计

直观的主要目标是简化实现全终端TUI（如 lazygit）的过程。直观试图使编写可重用的TUI组件变得容易，这些组件是

• 可读的（最小化代码）
• 熟悉的（类似于现有的Web框架）
• 功能齐全的（条件渲染、键/鼠标处理、响应式）

入门指南

直观中有几个基本概念

• 使用 #[component(..)] 编写组件。
• 使用 render! 使用组件。
• 使用钩子。

这三个概念的一个快速示例如下

use std::{thread, time::Duration};

use intuitive::{
  component,
  components::{Fixed, Padding, Section, Text},
  element::Any as AnyElement,
  error::Result,
  render,
  render::hooks::{UseEffect, UseState},
  style::Color,
  terminal::Terminal,
  utils::layout::{Alignment, Amount},
};

#[component(Root)]
fn render() -> AnyElement {
  let seconds = hooks.use_state(|| 0);

  hooks.use_effect(|| {
    thread::spawn({
      let seconds = seconds.clone();
      move || loop {
        thread::sleep(Duration::from_secs(1));

        seconds.update(|seconds| seconds + 1).unwrap();
      }
    });
  });

  render! {
    Padding(amount: Amount::Percentage(10)) {
      Fixed(height: Amount::Fixed(3)) {
        Section(title: "Seconds", border: Color::Red) {
          Text(
            text: format!("This program has run for {} seconds", seconds.get()),
            alignment: Alignment::Center
          )
        }
      }
    }
  }
}

fn main() -> Result<()> {
  Terminal::new()?.render(Root {})?;

  Ok(())
}

在上文中，使用#[component(..)]属性宏定义了一个Root组件。它使用UseState钩子创建了一个State<i32>，其初始值为0。然后它使用UseEffect钩子在该组件首次渲染时运行一个函数。具体来说，它会每秒生成一个线程来增加seconds的值。这意味着Root将每秒重新渲染一次，每次seconds更新时都会重新渲染。

然后，Root::render返回一个由Padding、Fixed、Section、Text组件和render!宏构建的元素。具体来说，它构建了一个将在屏幕上居中且具有固定高度的文本部分。显示的文本将显示程序开始后经过的秒数。

有关更多详细信息，请参阅入门部分开头的相关文档。