作为一个新手,我正在尝试创建一个看起来像这样的行
我无法将textField的宽度固定在左侧,而将汽车Icon设置在最右侧。我试图用Stack
对其进行破解,但文字在到达图标时会覆盖图标。有人可以提供更好的方法来将这两个小部件并排放置。
我的尝试
Positioned(
top: 50.0,
right: 15.0,
left: 15.0,
child: Container(
height: 50.0,
width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(3.0),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey,
offset: Offset(1.0, 5.0),
blurRadius: 10,
spreadRadius: 3)
],
),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Stack(
children: [
TextField(
cursorColor: Colors.black,
// controller: appState.locationController,
decoration: InputDecoration(
hintText: "pick up",
border: InputBorder.none,
// mainAxisAlignment: MainAxisAlignment.center,
// crossAxisAlignment: CrossAxisAlignment.center,
// contentPadding: EdgeInsets.only(left: 15.0, top: 16.0),
icon: Container(
margin: EdgeInsets.only(left: 10),
width: 10,
height: 10,
child: Icon(
Icons.location_on,
color: Colors.black,
),
),
),
),
Positioned(
right: 8,
child: IconButton(icon: Icon(Icons.business), onPressed: () {})
)
],
),
),
]
),
]
),
),
),
您要复制的示例看起来很像ListTile
(doc here)。
我能够使用以下样式重现类似内容:
其代码为:
Container(
color: Colors.black,
child: ListTile(
leading: Icon(Icons.location_on),
title: TextField(
cursorColor: Colors.black,
decoration: InputDecoration(
hintText: "Pick up",
border: InputBorder.none,
),
),
trailing: Icon(Icons.business),
),
);