[英]Flutter: ListTile width
I have this code displaying 2 ListTiles
in the same line:我有此代码在同一行中显示 2 个
ListTiles
:
Row(
children: <Widget>[
Flexible(
child: ListTile(
leading: Icon(Icons.call),
title: TextFormField(
controller: _phoneNumberController,
keyboardType: TextInputType.phone,
decoration: InputDecoration(
hintText: translate('contact_list.number')),
validator: (value) {
return Helpers.checkInput(value);
},
),
),
),
Expanded(
child: ListTile(
title: TextFormField(
controller: _phoneNumberController,
keyboardType: TextInputType.phone,
decoration: InputDecoration(
hintText: translate('contact_list.number')),
validator: (value) {
return Helpers.checkInput(value);
},
),
),
),
],
),
Both of them are taking 50% of the space but I'd need the first one taking a fixed width.它们都占用了 50% 的空间,但我需要第一个占用固定宽度的空间。
What I'm trying to archive is display a telephone number input with its phone code on the left (and that needs to be smaller)我试图存档的是在左侧显示一个电话号码输入,其电话代码需要更小
This could be a possible solution for what you are looking for:这可能是您正在寻找的可能的解决方案:
Row(
children: <Widget>[
ConstrainedBox(
constraints: BoxConstraints(
/// Just an example, but this makes sure, that since you set a fixed width like 300.0, on small screens this won't get too big. For example by setting a maxWidth constraint like this, its width will be 300.0, but at max as big as 1 / 3 of the screen width so it gets smaller on small screen sizes
maxWidth: MediaQuery.of(context).size.width / 3,
),
child: SizedBox(
/// Enter your fixed width here, 300.0 ist just an example
width: 300.0,
child: ListTile(
leading: Icon(Icons.call),
title: TextFormField(
controller: _phoneNumberController,
keyboardType: TextInputType.phone,
decoration: InputDecoration(
hintText: translate('contact_list.number')),
validator: (value) {
return Helpers.checkInput(value);
},
),
),
),
),
Expanded(
child: ListTile(
title: TextFormField(
controller: _phoneNumberController,
keyboardType: TextInputType.phone,
decoration: InputDecoration(
hintText: translate('contact_list.number')),
validator: (value) {
return Helpers.checkInput(value);
},
),
),
),
],
),
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.