FireMonkey 做界面的一个小技巧

Win10 有个自带的软件：便签。

试着 FireMonkey 框架仿造它的界面。

界面目标

1. 每条便签显示为黄色背景，黑色字体；

2. 鼠标指过去，这个黄色的便签会颜色加重，鼠标离开颜色还原，有动态的效果。

实现方法小技巧

1. 用一个 Frame，里面放一个 Memo 用来做便签；界面上显示的多条便签，就创建多个 Frame 实例，并且设置它的 Align := Top 来实现多条一律从上往下排。

2. Memo 的背景色：请参考本博客前两天的一篇文章。

3. 鼠标指过去就变色：

3.1. 对于这个便签 Frame，最底层是一个托盘容器 Layout1；Memo1 放到它的上面。也就是：

Memo1.Parent := Layout1;
Memo1.Align := TAlignLayout.Client;

3.2. 拖一个 Rectangle1 过来放上面，罩在这个 Memo1 的上面，用来变色。注意它的摆放方式的代码：

Rectangle1.parent := Layout1;
Rectangle1.Align := TAlignLayout.Content; //这个值在 FireMonkey 里面有，VCL 里面没有。

3.3. 设置这个 Rectangle1 的透明度为 0.3 （ 1 为彻底不透明；0 为彻底透明）

3.4. 要设置所有摆放在 Layout1 上面的东西的 HitTest 为 False，包括上述 Memo1 和 Rectangle1;

3.5. 在 Layout1 的 OnMouseEnter 和 OnMouseLeave 里面写代码：

procedure TFrameMyNote.Layout1MouseEnter(Sender: TObject);
begin
  Rectangle1.Visible := True; //显示这个半透明的 Rect，它本身有深灰颜色，叠加在 Memo1 上面，使得 Memo1 本身的颜色加深。
end;
 
procedure TFrameMyNote.Layout1MouseLeave(Sender: TObject);
begin
  Rectangle1.Visible  := False;  它不显示，直接显示底下的 Memo，颜色恢复。
end;

 4. 这个 Memo1 仅仅用于显示文字内容，不做编辑。因此不想有个光标在里面闪烁，也不想用户无意中点进去，按键盘，把内容改了。因此需要设置：

Memo1.ReadOnly := True;  //无法修改它的内容。
Memo1.HitTest := False; //鼠标点不了它！

5. 如果需要修改上述便签的内容，或者新增一个便签，需要显示一个编辑界面，编辑界面同样是一个 Frame 里面放了一个 TMemo 控件。这个编辑界面如何显示出来？可以考虑模仿手机界面的方式，叠加这个界面在原来的界面顶上，用完点左上角的回退按钮关闭这个编辑界面返回原来的界面。

总结：

小技巧就是，要让一个东西随鼠标指过去颜色变深，鼠标离开颜色变回正常，以获得对鼠标的响应，可以给那个东西上面罩一个 TRectangle，设置其透明度让它半透明。然后在鼠标事件里面，设置这个 TRectangle 的 Visible 属性来改变它显示或者不显示。