Изменение цвета фона TCornerButton в Delphi 12 с Firemonkey: решение проблемы прозрачности на iOS Simulator ARM

Delphi , Компоненты и Классы , Кнопки

Решение проблемы с прозрачным фоном TCornerButton в Firemonkey на iOS (Delphi 12)

В этой статье мы рассмотрим проблему, с которой столкнулся пользователь Delphi 12 с Firemonkey: изменение цвета фона TCornerButton через Style Designer работает корректно на Windows, но на iOS Simulator ARM кнопка отображается с прозрачным фоном, сливаясь с фоном родительского элемента. Мы разберем причины возникновения этой проблемы и предложим решения, основанные на опыте пользователя Ian и альтернативные подходы.

Причина проблемы: Раздельные стили для разных платформ

Как верно заметил SilverWarior, Firemonkey использует отдельные стили для каждой платформы. Изменения, внесенные в Style Designer для Windows, не применяются автоматически к другим платформам, таким как iOS. Это означает, что необходимо отдельно настраивать стиль TCornerButton для iOS, чтобы добиться желаемого цвета фона.

Решение, предложенное Ian: Создание собственного компонента

Ian столкнулся с тем, что в iOS Style Designer отсутствует возможность настройки цвета фона для TCornerButton. Он решил создать собственный компонент, имитирующий поведение кнопки, но с полным контролем над внешним видом. Этот подход включает следующие шаги:

1. Создание TRectangle: Используется для отрисовки фона кнопки.
2. Добавление TText и TImage: Эти компоненты используются для отображения текста и изображения на кнопке.
3. Настройка внешнего вида: Цвет фона TRectangle, шрифт TText, изображение TImage и другие свойства настраиваются в соответствии с желаемым дизайном.
4. Отключение HitTest: Для всех дочерних элементов (TText, TImage) устанавливается HitTest в False. Это позволяет перехватывать события клика/тача на уровне TRectangle.

Пример кода (Object Pascal - Delphi):

unit MyCustomButton;

interface

uses
  System.SysUtils, System.Classes, Vcl.Controls, Vcl.Graphics, FireMonkey.Types, FireMonkey.UI.Controls;

type
  TMyCustomButton = class(TControl)
  private
    FText: string;
    FImage: TBitmap;
    FBackgroundRect: TRectangle;
    FTextLabel: TText;
    FImagePic: TImage;
    procedure SetText(const Value: string);
    procedure SetImage(const Value: TBitmap);
  protected
    procedure Paint; override;
  public
    constructor Create(AOwner: TComponent); override;
    destructor Destroy; override;
    property Text: string read FText write SetText;
    property Image: TBitmap read FImage write SetImage;
  end;

implementation

uses
  Vcl.ExtCtrls;

constructor TMyCustomButton.Create(AOwner: TComponent);
begin
  inherited Create(AOwner);
  Width := 100;
  Height := 50;
  FBackgroundRect := TRectangle.Create(Self);
  FBackgroundRect.Brush.Color := clYellow; // Цвет фона
  FBackgroundRect.Left := 0;
  FBackgroundRect.Top := 0;
  FBackgroundRect.Width := Width;
  FBackgroundRect.Height := Height;

  FTextLabel := TText.Create(Self);
  FTextLabel.Left := 10;
  FTextLabel.Top := 10;
  FTextLabel.Font.Size := 12;
  FTextLabel.Font.Name := 'Arial';
  FTextLabel.HitTest := False;
  FTextLabel.Parent := Self;

  FImagePic := TImage.Create(Self);
  FImagePic.Left := Width - 30;
  FImagePic.Top := 10;
  FImagePic.HitTest := False;
  FImagePic.Parent := Self;

  FText := '';
  FImage := nil;
end;

destructor TMyCustomButton.Destroy;
begin
  FBackgroundRect.Free;
  FTextLabel.Free;
  FImagePic.Free;
  inherited Destroy;
end;

procedure TMyCustomButton.SetText(const Value: string);
begin
  FText := Value;
  FTextLabel.Caption := FText;
end;

procedure TMyCustomButton.SetImage(const Value: TBitmap);
begin
  FImage := Value;
  FImagePic.Bitmap := FImage;
end;

procedure TMyCustomButton.Paint;
begin
  Canvas.Brush.Color := FBackgroundRect.Brush.Color;
  Canvas.FillRect(FBackgroundRect.BoundsRect);
  FTextLabel.Paint;
  FImagePic.Paint;
end;

end.

Преимущества решения Ian:

• Полный контроль над внешним видом кнопки.
• Единый внешний вид на разных платформах.

Недостатки решения Ian:

• Необходимость ручной настройки каждого экземпляра кнопки при изменении внешнего вида.
• Более сложная реализация, чем использование стандартного TCornerButton.

Альтернативное решение: Использование Style Designer и TRectangle

Вместо создания полностью нового компонента, можно использовать стандартный TCornerButton и добавить поверх него TRectangle для отрисовки фона. Это позволит сохранить функциональность TCornerButton (обработка кликов, поддержка стилей) и одновременно получить контроль над цветом фона.

1. Добавление TRectangle: Добавьте TRectangle в качестве дочернего элемента TCornerButton.
2. Настройка TRectangle: Установите цвет фона, положение и размеры TRectangle так, чтобы он покрывал всю область TCornerButton.
3. Отключение HitTest: Установите HitTest в False для TRectangle.

Преимущества альтернативного решения:

• Проще в реализации, чем создание собственного компонента.
• Использует стандартный TCornerButton, сохраняя его функциональность.

Недостатки альтернативного решения:

• Может потребоваться дополнительная настройка для обеспечения корректного отображения на разных платформах.
• Не полный контроль над всеми аспектами внешнего вида кнопки, как при создании собственного компонента.

Заключение

Проблема с прозрачным фоном TCornerButton на iOS в Firemonkey возникает из-за отсутствия синхронизации стилей между платформами. Решение, предложенное Ian, заключается в создании собственного компонента, имитирующего поведение кнопки, но с полным контролем над внешним видом. Альтернативным решением является использование TRectangle поверх TCornerButton для отрисовки фона. Выбор оптимального решения зависит от требуемого уровня контроля над внешним видом кнопки и сложности реализации. Важно помнить, что при работе с Firemonkey необходимо учитывать особенности каждой платформы и настраивать стили отдельно для каждой из них.

Создано по материалам из источника по ссылке.

Статья описывает решение проблемы прозрачного фона кнопки TCornerButton в Firemonkey на iOS через создание кастомного компонента или использование TRectangle.

Комментарии и вопросы

Получайте свежие новости и обновления по Object Pascal, Delphi и Lazarus прямо в свой смартфон. Подпишитесь на наш Telegram-канал delphi_kansoftware и будьте в курсе последних тенденций в разработке под Linux, Windows, Android и iOS

:: Главная :: Кнопки ::