dart 如何使一个textformfield圆形在 Flutter ?

nc1teljy  于 2024-01-04  发布在  Flutter
关注(0)|答案(3)|浏览(157)

我做了一个圆形的textformfield,但是文本最终离开了圆圈,我想让它留在圆圈内,但是它最终离开了


的数据

Container(
    height: 300,
    width: 300,
    padding: const EdgeInsets.all(5),
    decoration: BoxDecoration(
      color: Colors.amber,
        shape: BoxShape.circle,
    ),
   child:TextFormField(
       expands: true,
       maxLines: null,
       textAlign: TextAlign.center,
       textAlignVertical: TextAlignVertical.center,
       keyboardType: TextInputType.multiline,
       decoration: InputDecoration(
        border: OutlineInputBorder(borderRadius: BorderRadius.circular(500)),
        filled: false,
        ),
   );
),

字符串

lkaoscv7

lkaoscv71#

可以使用Padding并设置expand:true来填充容器

Container(
    height: 300,
    width: 300,
    decoration: BoxDecoration(borderRadius: BorderRadius.circular(150), color: Colors.amber),
    padding: const EdgeInsets.all(50),
    child: TextFormField(
      expands: true,
      maxLines: null,
      decoration: const InputDecoration(border: InputBorder.none),
    ),
  ),

字符串


的数据

dnph8jn4

dnph8jn42#

只需使用ClipRRect Package TextFormField

Container(
                            height: 300,
                            width: 300,
                            padding: const EdgeInsets.all(5),
                            decoration: BoxDecoration(
                              color: Colors.amber,
                              shape: BoxShape.circle,
                            ),
                            child:ClipRRect(
                              child: TextFormField(
                                expands: true,
                                maxLines: null,
                                textAlign: TextAlign.center,
                                textAlignVertical: TextAlignVertical.center,
                                keyboardType: TextInputType.multiline,
                                decoration: InputDecoration(
                                  border: OutlineInputBorder(borderRadius: BorderRadius.circular(500)),
                                  filled: false,
                                ),
                              ),
                            )

字符串
)的情况)

xnifntxz

xnifntxz3#

只需将TextFormField与Container Package 在一起,并给予Container边框半径,并在TextFormFields的装饰中应用InputBorder.none

例如:-
集装箱(

decoration: BoxDecoration(
        color: Color.fromRGBO(173, 239, 209, 1),
        border: Border.all(color: Colors.grey, width: 2),
        borderRadius: BorderRadius.circular(28)),
    child: TextFormField(
      decoration: InputDecoration(
          hintText: "Enter a number", border: InputBorder.none),
    ),

字符串
),

相关问题