Flutter 实现圆角输入框

界面效果如下:

源码如下:

import 'package:flutter/material.dart';

void main() => runApp(
      MaterialApp(
        home: Scaffold(
          body: Container(
            /// 设置外边距
            margin: EdgeInsets.all(20),
            child: TextField(
              /// 设置字体
              style: TextStyle(
                fontSize: 16,
              ),

              /// 设置输入框样式
              decoration: InputDecoration(
                hintText: '请输入手机号',

                /// 边框
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.all(
                    /// 里面的数值尽可能大才是左右半圆形,否则就是普通的圆角形
                    Radius.circular(50),
                  ),
                ),

                ///设置内容内边距
                contentPadding: EdgeInsets.only(
                  top: 0,
                  bottom: 0,
                ),
                /// 前缀图标
                prefixIcon: Icon(Icons.phone_iphone),
              ),
            ),
          ),
        ),
      ),
    );

【注】

1. TextField 必须在 Material Widget 下才能使用

2. Radius.circular(50) 这里面的数值尽可能的大,否则左右两边就不是半圆形的效果,比如设置为 10 :

Tips: 除了尽可能设置更大的值以外,我没有找到其他方式实现左右半圆形的圆角效果如果哪位大佬有其他的方式设置,请联系我: roc@havemail.cn

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注