右侧带有 labelText 的 TextField

Question

我试图将 TextField 的标签放在正确的位置，但我不知道如何。文字没问题，但问题出在标签上。

          TextField(
            enabled: this.enable,
            enableInteractiveSelection: false,
            autofocus: false,
            textAlign: TextAlign.right,
            keyboardType: TextInputType.number,
            decoration: InputDecoration(
                labelText: this.label,
                hintText: this.hint,
                alignLabelWithHint: true,
                errorText: snapshot.hasError ? snapshot.error : null),
            obscureText: this.obscure,
            controller: _controller,
          );

有人可以帮助我如何将 labelText 也放在右侧吗？

Answer 1

你可以使用Directionality。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MyHomePageState();
  }
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
          child: Padding(
              padding: EdgeInsets.all(30),
              child: Directionality(
                  textDirection: TextDirection.rtl,
                  child: TextField(
                    textAlign: TextAlign.right,
                    autofocus: true,
                    decoration: new InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: "?????",
                        hintText: "????? ??? ?? ???? ????"
                    ),
                  )
              )
          ),
        )
    );
  }
}

Answer 2

我认为 TextField 小部件没有执行此操作的属性，因此您有 2 个选项：

1- 使用自定义属性创建自定义文本字段，并包含用于对齐标签文本的属性。

2-删除标签文本并仅使用提示值，这在材料设计中很常见，因此您的代码应该如下所示：

TextFormField(
                enableInteractiveSelection: false,
                autofocus: false,
                textAlign: TextAlign.right,
                keyboardType: TextInputType.number,
                decoration: InputDecoration(
                    hintText: "Hello",
                    alignLabelWithHint: true,
                ),
              )