html输入框大圆弧,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