flutter 如何将suffixIcon对齐到多行TextField的顶部?

w8rqjzmb  于 2023-05-23  发布在  Flutter
关注(0)|答案(3)|浏览(298)

代码:

TextField(
  maxLines:null,
  decoration: InputDecoration(
  suffixIcon: Icon(Icons.delete),
  ),
)

每次插入新行时,图标都会自动居中。

oyjwcjzk

oyjwcjzk1#

我找到了一个变通办法只需使用TextFieldsuffix属性,而不是suffixIcon
代码:

TextField(
  maxLines:null,
  decoration: InputDecoration(
  suffix: Icon(Icons.delete),
  ),
)

输出:

注意:此解决方案可能会影响TextField的设计,并且当TextField未聚焦或没有数据时,Icon不可见

ldxq2e6h

ldxq2e6h2#

下面是我在Icon周围使用Padding实现的:

Container(
    height: 100,
    child: TextField(
      expands: true,
      maxLines: null,
      decoration: InputDecoration(
          suffixIcon: Padding(
        padding:
            const EdgeInsets.only(left: 0, top: 0, right: 0, bottom: 100),
        child: Icon(Icons.add),
      )),
    ),
  )
hof1towb

hof1towb3#

这里我已经做了这样的小部件。你可以试试。它将在TextFormFiled和TextField中工作。

Container(
            decoration: BoxDecoration(
              color: Colors.grey.shade200,
              borderRadius: BorderRadius.circular(10.0),
            ),
            child: TextFormField(
            textAlignVertical: TextAlignVertical.top,
              // controller: ,
              maxLines: 4,
              decoration: InputDecoration(
                  border: InputBorder.none,
                  hintText: "Bio",
                  prefixIcon: Align(
                  alignment: Alignment.topCenter,
                  widthFactor: 1.0,
                  heightFactor: 5.0,
                    child: Padding(
                      padding: const EdgeInsets.only(left: 8.0, top:10),
                      child: Icon(
                        Icons.edit_document,
                        color: Colors.grey,
                      ),
                    ),
                  ),
               ),
            ),
          ),

HappyCoding..

相关问题