如何创建独特的TextBox设计
如何创建独特的TextBox设计
提问于 2020-04-28 18:53:02
我尝试了不同的方法来设计下面的设计，但无法做到，白色圆角正方形是一个可以输入数字的TextBox。有人知道如何在flutter中设计这个吗？如果有人能帮我，那就太好了:)
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-04-28 21:16:04
以下是设计以下文本字段的工作代码：
我使用了一个内部有两个Container的Row。第一个容器是蓝色的，第二个容器是文本字段的背景。TextField是容器2的child。对于边框和阴影，使用容器的decoration属性
完整代码；使用_height变量调整文本字段高度：
class MyWidget extends StatelessWidget {
final double _height = 45;
@override
Widget build(BuildContext context) {
return Container(
alignment: Alignment.center,
height: _height,
child: Row(
children: [
Container(
child: Text('A', style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 24)),
alignment: Alignment.center,
width: 50,
height: _height,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(_height / 2), bottomLeft: Radius.circular(_height / 2)),
color: Colors.blueAccent,
boxShadow: [
BoxShadow(
color: Colors.grey,
blurRadius: 4.0, // has the effect of softening the shadow
offset: Offset(
3.0, // horizontal, move right 10
3.0, // vertical, move down 10
),
),
],
),
),
Container(
height: _height,
child: TextField(
decoration: new InputDecoration(
border: InputBorder.none,
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
contentPadding: EdgeInsets.only(left: 10)),
),
width: 300,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topRight: Radius.circular(_height / 2), bottomRight: Radius.circular(_height / 2)),
color: Colors.grey[200],
boxShadow: [
BoxShadow(
color: Colors.grey,
blurRadius: 4.0, // has the effect of softening the shadow
offset: Offset(
3.0, // horizontal, move right 10
3.0, // vertical, move down 10
),
),
],
),
),
],
),
);
}
}Stack Overflow用户
发布于 2020-04-28 19:06:16
我尝试了下面的代码，它给出了一个类似的设计
Container(
width: double.infinity,
child: Row(
children: <Widget>[
Card(
margin: EdgeInsets.only(),
color: Color(0xff99d4fa),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(32.0),
topLeft: Radius.circular(32.0)),
),
child: Container(
padding: EdgeInsets.only(
top: 8, bottom: 8, left: 15, right: 12),
child: TextStyles(headText: 'A'),
),
elevation: 6,
),
Expanded(
child: Container(
height: 41,
//margin: EdgeInsets.only(top: 8,),
decoration: new BoxDecoration(
borderRadius: new BorderRadius.only(
bottomRight: Radius.circular(32.0),
topRight: Radius.circular(32.0),
),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey[400],
spreadRadius: 0.01,
offset: Offset(3, 3), //(x,y)
blurRadius: 5,
),
],
),
child: Padding(
padding: EdgeInsets.zero,
child: TextField(
decoration: new InputDecoration(
border: InputBorder.none,
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
contentPadding: EdgeInsets.only(left: 10)),
),
),
))
],
),
),有什么简单的选择可以做到这一点吗？
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61478470
复制相关文章
相似问题
腾讯云开发者
