具有动画提示/标签的TextField

Question

我想实现一个包含TextFields的表单。每个字段都有一个标签/提示。我希望提示动画并在用户开始键入时成为标签。这是标准的Material设计模式，因此我希望它可以由标准的Widgets实现。

类似这样的事情：

Answer 1

结果非常简单。

MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent) { auto *view = new QGraphicsView(this); auto *widget = new QWidget(); auto *leftWidget = new QPushButton(tr("Left")); auto *rightWidget = new QPushButton(tr("Right")); auto *leftProxy = new QGraphicsProxyWidget(); auto *rightProxy = new QGraphicsProxyWidget(); auto *l = new QGraphicsLinearLayout(); auto *sizeGrip = new QSizeGrip(widget); leftWidget->setSizePolicy(QSizePolicy::Minimum, QSizePolicy::Expanding); rightWidget->setSizePolicy(QSizePolicy::Minimum, QSizePolicy::Expanding); widget->setSizePolicy(QSizePolicy::Minimum, QSizePolicy::Minimum); widget->setMinimumSize(sizeGrip->sizeHint().width() + leftWidget->sizeHint().width() + rightWidget->sizeHint().width(), leftWidget->sizeHint().height()); leftProxy->setWidget(leftWidget); rightProxy->setWidget(rightWidget); l->addItem(leftProxy); l->addStretch(); l->addItem(rightProxy); l->setContentsMargins(25, 1, 1, 1); l->setSpacing(1); view->setScene(new QGraphicsScene(this)); view->scene()->addWidget(widget)->setLayout(l); widget->resize(400, 200); setCentralWidget(view); resize(640, 480); } 有一个labelText参数，它可以满足我的需求。

例如

TextField（decoration：InputDecoration（labelText：'Full name'）），

Answer 2

这也是制作自己的方法或小部件的好方法。（以便以后可以重用代码）

示例：

private void BrowseBtnClick(object sender, RoutedEventArgs e)
{
   BackupFileLocationTextBox.Focus();
   BackupFileLocationTextBox.Select(BackupFileLocationTextBox.Text.Length, 0);
   BackupFileLocationTextBox.CaretIndex = BackupFileLocationTextBox.Text.Length;
}

==============

编辑：

如下面@ Evin1_所述。 阅读本文Splitting widgets to methods is a performance antipattern/Iiro Krankka

之后

我发现最好使用 StatelessWidget 来拆分代码和函数，以便仅进行操作。

原因： 这样，您将不会浪费CPU时间而无需多次重建静态小部件树。

如果您真的更喜欢使用方法构建窗口小部件树，则可能需要看一下Remi Rousselet开发的名为functional_widget的软件包。

也其他评论，有关此处有关此主题的更多信息，请 difference between functions and classes to create reusable widgets

Answer 3

在Flutter中，提示和标签都以两种不同的方式运行，即提示文本将显示为固定，但 labelText将显示为（双作用）作为提示，当光标变得聚焦时，动画会显示在顶部。

TextField(decoration: InputDecoration(
                          labelText: "Animatable hint",
                           hintText: "Inanimate hint")
                      )
)

Answer 4

labelText 和 HintText 的区别。

labelText ：如果输入字段为空或未聚焦，则显示输入字段的标签顶部。当它获得焦点时，labelText 移动到输入字段上方。

hintText：只向用户显示提示。

TextField(decoration: InputDecoration(labelText: 'labelText'),),
TextField(decoration: InputDecoration(hintText: 'hintText'),),
TextField(decoration:InputDecoration(hintText: 'both', labelText: 'both'),),

more information - TextFormField placeholder