标签: custom-component

我已经创建了一个基于TPaintBox的组件TGridPaintBox.它基本上是一个添加了"网格功能"的绘图箱.它不是数据网格.更像是棋盘组件.

在对象资源管理器中,我可以设置某些属性.最重要的是,我可以设置网格尺寸(横跨/向下有多少个单元格),还可以设置与绘图相关的选项.细胞是否应该是正方形,奇数/偶数细胞的颜色等.

我的第一个版本的组件直接在类上有属性,当我更改属性时,立即更新了设计时图.随着组件的增长,我想更好地组织我的属性,并引入了一些"选项属性",如绘图选项,行为选项等.在介绍之后,设计时绘图不再像以前那样更新.更改属性后,我必须单击组件才能更新.谁能告诉我为什么会这样？

这是代码的精简版本.我希望它能解释这种行为:

(PS:这是我的第一个组件,即使我自1997年以来一直使用Delphi,所以如果有人能像我做的那样发现任何愚蠢的东西,请随时告诉我)

unit GridPaintBox;

interface

type
  TGridDrawOption = (gdoSquareCells,gdoCenterCells,gdoDrawCellEdges,gdoDrawFocus);
  TGridDrawOptions = set of TGridDrawOption;

  TGridOptions = class(TPersistent)
  private
    FCellsX : integer;
    FCellsY : integer;
    FDrawOptions : TGridDrawOptions;
  public
    constructor Create(aGridPaintBox : TGridPaintBox);
    procedure Assign(Source : TPersistent); override;
  published
    property CellsX : integer read FCellsX write FCellsX;
    property CellsY : integer read FCellsY write FCellsY;
    property DrawOptions : TGridDrawOptions read FDrawOptions write FDrawOptions;
  end;

  TGridPaintBox = class(TPaintBox)
  private
    FGridOptions : TGridOptions;
    FFocusedX,
    FFocusedY : integer;
    FOnFocusChanged: TNotifyEvent; 
    procedure …

我创建了自己的自定义微调器,我可以在它实现的"自定义和库视图"中访问它View.但是,问题是当从我的调色板中拖动我的自定义微调器以在我的中使用它时main.xml,它会抛出"未处理的事件循环异常".我不知道我的错误在哪里.

main.xml中

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:pref="http://schemas.android.com/apk/res/com.myspinner"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<com.myspinner.Myspinner
android:id="@+id/myspinner1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
pref:MyEntries="@array/testarray" />

MySpinnerattributes.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="MySpinner">
        <attr name="MyEntries" format="reference"/>
    </declare-styleable>
</resources>

spinnerlayout.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/textView1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    android:text="@string/large_text" android:gravity="center"/>

Myspinner.java

    public class Myspinner extends Spinner{


    LayoutInflater inflater;
    CharSequence cs[]={"MySpinner"};
    String s[]={"MySpinner"};
    View row;
    TextView txt;


public Myspinner(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    setAttributes(attrs);    
    this.setAdapter(new MyAdapter(this.getContext(), R.layout.spinnerlayout,s));
    }



public Myspinner(Context …

我正在按照这篇中等文章FloatingTitleTextInputField在我的反应本机项目中使用

下面是我的项目结构

这是我的代码HomeScreen.js

import React, {Component} from 'react';
import {Text, View, TextInput, StyleSheet} from 'react-native';
import FloatingTitleTextInputField from './customComponents/floating_title_text_input_field';



export default class HomeScreen extends Component {
  render() {
    return (
      // <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      //   <Text>My First React App</Text>
      //   <TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1}} />
      // </View>

      <View style={styles.container}>
        <View style={styles.container}>
          <Text style={styles.headerText}>Its Amazing</Text>
          <FloatingTitleTextInputField
            attrName="firstName"
            title="First Name"
            value={this.state.firstName}
            updateMasterState={this._updateMasterState}
          />
          <FloatingTitleTextInputField
            attrName="lastName"
            title="Last Name"
            value={this.state.lastName}
            updateMasterState={this._updateMasterState}
          />
        </View> …

我通过扩展仅在屏幕上绘制一些文本的ImageView来创建自定义图像视图,但是我没有看到模拟器屏幕中绘制的任何内容,但是日志消息和printlns在日志控制台中打印.我没做什么事吗？

这是我的活动

public class HelloAndroidActivity extends Activity
{
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);

        //        setContentView(R.layout.main);
        CustomImageView myView = new CustomImageView(getApplicationContext());
        System.out.println("Setting the view");
        myView.invalidate();
        setContentView(myView);
        System.out.println("Calling invalidate");
    }
}

这是我的CustomImageView

public class CustomImageView extends ImageView
{

    /**
     * @param context
     */
    public CustomImageView(Context context)
    {
        super(context);
        // TODO Auto-generated constructor stub
        setBackgroundColor(0xFFFFFF);
    }

    /**
     * @param context
     * @param attrs
     */
    public CustomImageView(Context context, AttributeSet attrs)
    {
        super(context, attrs); …

我正在尝试为我制作的自定义组件制作一个包.它基于几个库,包括Graphics32,GraphicEx和CCR.Exif.

我创建了一个Package项目,编写了包含其Register寄存程序的单元,添加了一些额外的引用,Delphi通知我有关requires部分(包括dbrtl.dcp,inet.dcp,soaprtl.dcp,vclimg.dcp,xmlrtl.dcp和dclGraphicEx140). dcp)并在contains部分添加了许多单元,以避免隐式发生有关它的警告.该项目编译并可以在我自己的机器上安装和使用而不会出现问题.但是,当我想在另一台机器上安装它时,麻烦就开始了.最后,我不得不复制我使用的所有第三方组件的所有DCU,以及来自GraphicEx的DCP和BPL,我必须安装它.

提供大量文件是一个无赖,但可以克服,但不得不安装其他软件包是不行的.我可以通过在包含部分中放置更多单元来摆脱DCP和BPL ,但这导致我自己的机器上实际安装了GraphicEx的错误消息.这对我来说很困惑,因为有了Graphics32就不会发生这样的事了......

无论如何,我如何将我的分配保持在最低限度并避免这种情况？我希望我团队中的其他开发人员能够使用该软件包,而不必担心我用它来构建它.首先,不能将所有第三方单元编译到我自己的DCU中吗？

我已经按照一些关于创建自定义属性编辑器对话框的教程,但涉及的内容很多,我无法正常工作.我想要完成的是一个自定义表单,带有日期选择器(日历),时间选择器,以及确定和取消按钮.表单完全没问题,但是我如何实现这一点,以便我可以使用按钮发布属性编辑器的某个类型的任何组件中的属性？

我想完全覆盖TDateTime类型并将我的自定义编辑器放在其位置,因此无论在何处TDateTime发布并在Object Inspector中可见,我都可以使用此编辑器在同一窗口中同时修改日期和时间.

问题是关于创建自定义属性编辑器的文档很差,尽管有些资源非常透彻,但它们会详细介绍这些功能,并且在最常见的场景中缺乏重点.

有人可以帮我创建如下的自定义按钮吗？可能吗？已经搜索了很多,并且只能找到一些再次成为的东西rectangular/square shapes.但我希望两个按钮triangular可以安排在另一个上,并且只能在他们特定的占用区域上点击.代码片段表示赞赏.

（注意：我正在为这个应用程序使用 Expo）

我正在尝试渲染一个FlatList显示打印机列表的文件。这是代码：

<FlatList
  data={printers}
  keyExtractor={printer => printer.id}
  renderItem={({ item }) => {
    return (
      <Printer
        printerTitle={item.name}
        selected={item.selected}
        last={item === last(printers)}
      />
    );
  }}
/>

这是<Printer />组件的代码：

const Printer = props => {
  const { last, printerTitle, selected } = props;
  return (
    <View style={[styles.container, last ? styles.lastContainer : null]}>
      <View style={styles.innerContainer}>
        <View style={styles.leftContainter}>
          {selected ? (
            <Image source={selected ? Images.checkedCircle : null} />
          ) : null}
        </View>
        <View style={styles.printerDetails}>
          <Text style={styles.printerTitle}>{printerTitle}</Text>
        </View>
      </View>
    </View>
  ); …

我正在处理这种情况...

<template>
  <slot name="thing"></slot>
  <slot name="other"></slot>
</template>

和一个像这样的实现

<custom-element>
  <div slot="thing"> Thing 1 </div>
  <div slot="thing"> Thing 2 </div>
  <div slot="other"> Thing 3 </div>
</custom-element>

如何使用 CSS 查询影响事物 1 和事物 2 但排除事物 3？

我正在使用 Vue3 和组合 API。在表单组件中，我在每个字段（子组件）上放置了引用。

由于某些原因，ref自定义组件的 与refQuasar 组件的 不同。

当我console.log使用ref自定义组件时，我在 DevTools 中得到以下信息：

Proxy\xc2\xa0{__v_skip: true}   \n

（Target 中没有任何属性）

而对 Quasar 组件的引用给出了：

Proxy\xc2\xa0{\xe2\x80\xa6}  \n

（包含 Target 中组件的所有属性）

因此，我无法使用ref来访问这些子组件的属性或方法。

我什至不知道是什么__v_skip意思。\n我的自定义组件是用 定义的script setup，这可能是一个原因吗？

知道如何解决这个问题吗？

更新\n如果我defineExpose在子组件中使用我想使用 a 从外部访问的属性和方法ref，它确实有效。但不太方便，因为这些组件有很多道具。