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-使用您的自定义属性创建一个自定义TextField，并包含一个用于对齐标签文本的属性。

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

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

右侧带有labelText的TextField

2 个答案: