手机网站模板 商城,与网站签约,如何网站建设,抖音小程序推广视频如何制作1. 引言
在前面的文章中#xff0c;我们学习了如何在 views_examples 中添加自定义 Button 示例。在本篇文章中#xff0c;我们将继续探索 Views 框架的应用#xff0c;创建一个简单的计数器示例#xff0c;以学习如何使用 Label 和 Button 控件进行交互#xff0c;以及如…
1. 引言
在前面的文章中我们学习了如何在 views_examples 中添加自定义 Button 示例。在本篇文章中我们将继续探索 Views 框架的应用创建一个简单的计数器示例以学习如何使用 Label 和 Button 控件进行交互以及如何更新 UI 状态。
2. 创建计数器示例
为了创建计数器示例我们需要创建新的头文件和源文件并在其中定义计数器类和相关的示例代码。
2.1 创建头文件
首先我们在 ui/views/examples/ 目录下创建一个名为 counter_example.h 的头文件并在其中添加以下代码
#ifndef UI_VIEWS_EXAMPLES_COUNTER_EXAMPLE_H_
#define UI_VIEWS_EXAMPLES_COUNTER_EXAMPLE_H_#include ui/views/controls/button/button.h
#include ui/views/controls/label.h
#include ui/views/examples/example_base.hnamespace views::examples {class CounterExample : public ExampleBase {public:CounterExample();CounterExample(const CounterExample) delete;CounterExample operator(const CounterExample) delete;~CounterExample() override default;// ExampleBase:void CreateExampleView(View* container) override;private:void UpdateCounter();void OnDecreaseClicked();void OnIncreaseClicked();void OnResetClicked();int counter_;raw_ptrviews::Label counter_label_ nullptr;raw_ptrviews::Label status_label_ nullptr;
};} // namespace views::examples#endif // UI_VIEWS_EXAMPLES_COUNTER_EXAMPLE_H_
这段代码定义了一个名为 CounterExample 的类它继承自 ExampleBase。在 CounterExample 类中我们声明了四个私有成员函数UpdateCounter、OnDecreaseClicked、OnIncreaseClicked 和 OnResetClicked分别用于更新计数器、处理减少按钮点击事件、处理增加按钮点击事件和处理重置按钮点击事件。我们还声明了一个 int 类型的成员变量 counter_ 用于存储计数器的值以及两个 raw_ptrviews::Label 类型的成员变量 counter_label_ 和 status_label_分别用于显示计数器的值和状态信息。
2.2 创建源文件
接下来我们在 ui/views/examples/ 目录下创建一个名为 counter_example.cc 的源文件并在其中添加以下代码
#include ui/views/examples/counter_example.h#include base/functional/bind.h
#include ui/views/controls/button/md_text_button.h
#include ui/views/layout/box_layout.h
#include ui/views/controls/label.h
#include base/logging.h
#include base/strings/utf_string_conversions.hnamespace views::examples {CounterExample::CounterExample() : ExampleBase(Counter Example), counter_(0) {}void CounterExample::CreateExampleView(View* container) {// 使用水平布局auto* layout new views::BoxLayout(views::BoxLayout::Orientation::kHorizontal, gfx::Insets(10), // 边距20); // 组件间距container-SetLayoutManager(std::unique_ptrviews::BoxLayout(layout));// 减少按钮auto* decrease_button new views::MdTextButton(base::BindRepeating(CounterExample::OnDecreaseClicked,base::Unretained(this)),u-);decrease_button-SetStyle(ui::ButtonStyle::kText);container-AddChildView(decrease_button);// 计数显示标签counter_label_ new views::Label(u0);counter_label_-SetHorizontalAlignment(gfx::ALIGN_CENTER);counter_label_-SetSize(gfx::Size(50, 0)); // 设置标签大小container-AddChildView(counter_label_);// 增加按钮auto* increase_button new views::MdTextButton(base::BindRepeating(CounterExample::OnIncreaseClicked,base::Unretained(this)),u);increase_button-SetStyle(ui::ButtonStyle::kText);container-AddChildView(increase_button);// 重置按钮auto* reset_button new views::MdTextButton(base::BindRepeating(CounterExample::OnResetClicked,base::Unretained(this)),uReset);reset_button-SetStyle(ui::ButtonStyle::kTonal);container-AddChildView(reset_button);// 状态标签status_label_ new views::Label(uCounter initialized);container-AddChildView(status_label_);
}void CounterExample::UpdateCounter() {counter_label_-SetText(base::UTF8ToUTF16(std::to_string(counter_)));LOG(INFO) Counter value: counter_;
}void CounterExample::OnDecreaseClicked() {counter_--;UpdateCounter();status_label_-SetText(uCounter decreased);
}void CounterExample::OnIncreaseClicked() {counter_;UpdateCounter();status_label_-SetText(uCounter increased);
}void CounterExample::OnResetClicked() {counter_ 0;UpdateCounter();status_label_-SetText(uCounter reset);
}} // namespace views::examples
这段代码实现了 CounterExample 类的构造函数和 CreateExampleView、UpdateCounter、OnDecreaseClicked、OnIncreaseClicked、OnResetClicked 方法。
CounterExample::CounterExample(): 构造函数调用了父类 ExampleBase 的构造函数并设置了示例的名称为 Counter Example同时初始化 counter_ 为 0。CounterExample::CreateExampleView(View* container): 这个方法负责创建并添加计数器相关的控件到 container 中。 首先它创建了一个水平布局管理器 BoxLayout并将其设置给 container。然后它创建了四个按钮 decrease_button: 减少按钮点击后会调用 OnDecreaseClicked 方法。increase_button: 增加按钮点击后会调用 OnIncreaseClicked 方法。reset_button: 重置按钮点击后会调用 OnResetClicked 方法。接着创建了一个 Label 控件 counter_label_用于显示计数器的值设置其水平对齐方式为居中并设置了最小宽度为50像素。最后创建了一个 Label 控件 status_label_用于显示计数器的状态信息。CounterExample::UpdateCounter(): 这个方法用于更新 counter_label_ 的文本内容将其设置为当前计数器的值并在日志中输出当前计数器的值。CounterExample::OnDecreaseClicked(): 当 decrease_button 被点击时这个方法会被调用。它会将计数器 counter_ 的值减1调用 UpdateCounter 方法更新 counter_label_ 的显示并将 status_label_ 的文本设置为 Counter decreased。CounterExample::OnIncreaseClicked(): 当 increase_button 被点击时这个方法会被调用。它会将计数器 counter_ 的值加1调用 UpdateCounter 方法更新 counter_label_ 的显示并将 status_label_ 的文本设置为 Counter increased。CounterExample::OnResetClicked(): 当 reset_button 被点击时这个方法会被调用。它会将计数器 counter_ 的值重置为0调用 UpdateCounter 方法更新 counter_label_ 的显示并将 status_label_ 的文本设置为 Counter reset。
3. 修改 BUILD.gn 文件
为了将我们的计数器示例添加到构建系统中我们需要修改 ui/views/examples/BUILD.gn 文件将我们新创建的源文件添加到 examples 目标的 sources 属性中。
打开 ui/views/examples/BUILD.gn 文件找到 views_examples_lib 部分并在 sources 列表中添加以下两行
counter_example.cc,
counter_example.h,
4. 注册示例
最后我们需要在 ui/views/examples/create_examples.cc 文件中注册我们的计数器示例这样 views_examples 程序才能找到并显示它。
打开 ui/views/examples/create_examples.cc 文件找到 CreateExamples 函数并在 examples 向量中添加以下代码
examples.push_back(std::make_uniqueCounterExample());
修改后的 CreateExamples 函数应该类似于这样
ExampleVector CreateExamples() {ExampleVector examples;// ... 其他示例 ...examples.push_back(std::make_uniqueMyCustomButtonExample());examples.push_back(std::make_uniqueCounterExample());// ... 其他示例 ...return examples;
}
5. 重新编译并运行
完成以上步骤后我们需要重新编译 views_examples 目标。在 Chromium 源码的 src 目录下执行以下命令
autoninja -C out/Default views_examples 编译完成后运行 views_examples
./out/Default/views_examples 如果一切顺利你将在 Views Examples 窗口中看到一个新的标签页 Counter Example点击该标签页你将看到我们自定义的计数器包括一个显示计数器值的 Label以及减少、增加和重置三个按钮。点击不同的按钮计数器的值会相应地改变同时下方的 Label 会显示相应的状态信息。
6. 结语
在本篇文章中我们学习了如何在 views_examples 中添加计数器示例包括创建头文件和源文件、修改 BUILD.gn 文件、注册示例以及重新编译和运行。通过这个过程我们学习了如何使用 Label 和 Button 控件进行交互以及如何更新 UI 状态。
希望这篇文章能够帮助你更好地理解 Chromium 的 Views 框架和 GN 构建系统。在接下来的文章中我们将继续探索 Chromium 和 GN 的更多高级用法。
