Question

我想将图标和标签文本移到“文本字段”的右侧。我尝试了textAlign: TextAlign.right，但这仅用于输入文字。

    TextFormField(
      textAlign: TextAlign.right,
      textDirection: TextDirection.rtl,
      keyboardType: TextInputType.multiline,
      maxLines: 2,
      decoration: const InputDecoration(
        icon: Icon(Icons.description),  
        labelText: 'details',
      ),
  ),

Answer 1

创建变量

var _controller = TextEditingController();

还有您的TextField：

TextField(
  controller: _controller,
  decoration: InputDecoration(
    hintText: "Enter a message",
    suffixIcon: IconButton(
      onPressed: (){},
      icon: Icon(Icons.phone),
    ),
  ),
)

Answer 2

使用suffixIcon，该图标显示在装饰容器中的文本字段的可编辑部分之后，后缀或suffixText之后。Official API Doc

TextFormField(
    textAlign: TextAlign.right,
    decoration: InputDecoration(
       hintText: "Enter a message",
       suffixIcon: Icon(Icons.description),
    ),
),

这正是您所需要的，您需要自定义一些样式

@override
  Widget build(BuildContext context) {
    return Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: 200,
              child: TextFormField(
                textAlign: TextAlign.right,
                decoration: InputDecoration(
                  hintText: "Enter a message",
                ),
              ),
            ),
            Container(
              child: Icon(Icons.description),
            ),
          ],
    );
  }

Answer 3

我刚刚发现了Directionality小部件，它改变了包括标签和图标在内的所有内容的方向

dom: 'Bfrtip',
       lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],     // page length options
buttons: [


{
extend: 'copy',
exportOptions: {
columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22]
}
},

Answer 4

尝试“ suffixIcon：图标（图标电话）” 会成功的。

Answer 5

您必须使用suffixIcon suffixIcon：图标（ Ionicons.ios_search，颜色：黑色。），

如何将TextField的labelText和图标移到右侧

5 个答案: