我尝试了下面的代码,它给了我类似的设计
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)),
),
),
))
],
),
),
有什么简单的选择可以做到吗?
我使用了Row
,内部有两个Container
。第一个容器是蓝色的,第二个容器是文本字段的背景。 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
),
),
],
),
),
],
),
);
}
}