How to prevent MultiView opacity from affecting children components texts in Delphi?

问题

I'm using MultiView with some TButton buttons in Firemonkey. The multiView is opaque at 0.5 and this causes the buttons to also be opaque.

QUESTION: Is there a way to prevent MultiView opacity from affecting the button texts? That is, the text of the buttons would continue with bright colors, but the "body" of the buttons would be opaque. I've seen some applications with this visual feature, but I do not know what components were used for that purpose ...

回答1:

Instead of the TMultiView, use a TRectangle as basis for the menu. Set its Align to left and the Fill.Color to $7FFFFFFF. The two first hex digits (7F) define the alpha channel (translucency), the rest of the hex digits (FFFFFF), define the RGB colors. This allows you to leave the Opacity at one, but still having the translucent effect. This is not possible with the TMultiView control.

For each item, use a TLayout, with a TImage and a TText and any separator lines you like. Use normal Align properties to setup the items.

Finally, set HitTest = True for the TLayout and HitTest = False for the TImage and TText controls. This is to enable mouse clicks or taps.

Below is my test, both as .fmx content (image data removed) and a snapshot.

  object Rectangle1: TRectangle
    Align = Left
    Fill.Color = x7FFFFFFF
    Size.Width = 200.000000000000000000
    Size.Height = 210.000000000000000000
    Size.PlatformDefault = False
    object Layout1: TLayout
      Align = Top
      HitTest = True
      Size.Width = 200.000000000000000000
      Size.Height = 50.000000000000000000
      Size.PlatformDefault = False
      TabOrder = 0
      object Image1: TImage
        MultiResBitmap.Height = 128
        MultiResBitmap.Width = 128
        MultiResBitmap = <
          item
            Width = 128
            Height = 128
            PNG = {}
            FileName = 'C:\tmp\Imgs\0.bmp'
          end>
        Align = Left
      end
      object Text4: TText
        Align = Left
        Position.X = 50.000000000000000000
        Size.Width = 151.000000000000000000
        Size.Height = 50.000000000000000000
        Size.PlatformDefault = False
        Text = 'Zero Hero'
        TextSettings.Font.Size = 21.000000000000000000
        TextSettings.Font.StyleExt = {00070000000000000004000000}
        TextSettings.FontColor = claDarkblue
      end
    end
    object Layout2: TLayout
      Align = Top
      HitTest = True
      Position.Y = 50.000000000000000000
      Size.Width = 200.000000000000000000
      Size.Height = 50.000000000000000000
      Size.PlatformDefault = False
      TabOrder = 1
      object Image2: TImage
        MultiResBitmap.Height = 128
        MultiResBitmap.Width = 128
        MultiResBitmap = <
          item
            Width = 128
            Height = 128
            PNG = {}
            FileName = 'C:\tmp\Imgs\1.bmp'
          end>
        Align = Left
      end
      object Text5: TText
        Align = Left
        Position.X = 50.000000000000000000
        Size.Width = 151.000000000000000000
        Size.Height = 50.000000000000000000
        Size.PlatformDefault = False
        Text = 'One More'
        TextSettings.Font.Size = 21.000000000000000000
        TextSettings.Font.StyleExt = {00070000000000000004000000}
        TextSettings.FontColor = claDarkblue
      end
    end
    object Layout3: TLayout
      Align = Top
      HitTest = True
      Position.Y = 100.000000000000000000
      Size.Width = 200.000000000000000000
      Size.Height = 50.000000000000000000
      Size.PlatformDefault = False
      TabOrder = 2
      OnClick = Layout3Click
      OnMouseDown = Layout3MouseDown
      object Image3: TImage
        MultiResBitmap.Height = 128
        MultiResBitmap.Width = 128
        MultiResBitmap = <
          item
            Width = 128
            Height = 128
            PNG = {}
            FileName = 'C:\tmp\Imgs\2.bmp'
          end>
        Align = Left
        HitTest = False
      end
      object Text6: TText
        Align = Left
        HitTest = False
        Position.X = 50.000000000000000000
        Size.Width = 150.000000000000000000
        Size.Height = 50.000000000000000000
        Size.PlatformDefault = False
        Text = 'Double Joy'
        TextSettings.Font.Size = 21.000000000000000000
        TextSettings.Font.StyleExt = {00070000000000000004000000}
        TextSettings.FontColor = claDarkblue
      end
    end
    object Layout4: TLayout
      Align = Top
      HitTest = True
      Position.Y = 150.000000000000000000
      Size.Width = 200.000000000000000000
      Size.Height = 50.000000000000000000
      Size.PlatformDefault = False
      TabOrder = 3
      object Image4: TImage
        MultiResBitmap.Height = 128
        MultiResBitmap.Width = 128
        MultiResBitmap = <
          item
            Width = 128
            Height = 128
            PNG = {}
            FileName = 'C:\tmp\Imgs\3.bmp'
          end>
        Align = Left
        HitTest = False
      end
      object Text1: TText
        Align = Left
        HitTest = False
        Position.X = 50.000000000000000000
        Size.Width = 151.000000000000000000
        Size.Height = 50.000000000000000000
        Size.PlatformDefault = False
        Text = 'Triple Fun'
        TextSettings.Font.Size = 21.000000000000000000
        TextSettings.Font.StyleExt = {00070000000000000004000000}
        TextSettings.FontColor = claDarkblue
      end
    end
  end

回答2:

I don't think you can. But you can achieve the effect by putting a blank button as a child of the multiview and adding a separate TText object as a child of the form (or other object with absolute opacity of 1) as shown in the screen shot below. It is not ideal if the button can move or resize for example, but this can be overcome by creating, say, a TPanel, making the the Multiview and text separate children of that, and then using the panel for moving and resizing purposes, which will ensure that the button and its associated text stay in step.

Edit

In light of Tom Brunsberg's comments I would suggest making both a child of a TPanel, rather than of a TForm. Certainly in my tests the issues he mentions of the TText going to the back do not occur when this is done. He is perfectly correct about setting HitTest to false for the TText object.

来源：https://stackoverflow.com/questions/47585746/how-to-prevent-multiview-opacity-from-affecting-children-components-texts-in-del

标签

Delphi

firemonkey

opacity