在FLUTTER中，在行内添加列表瓷砖后，列表视图会消失。
在FLUTTER中，在行内添加列表瓷砖后，列表视图会消失。
我正在开发一个编辑用户配置文件的屏幕，我需要创建一个行，其中应该包含两个性别的RadioListTile小部件。但是，当我将行添加到列表视图中后，一切都消失了，并且我收到以下错误
2: 'child.hasSize': is not true.
I/flutter (31410): Another exception was thrown: NoSuchMethodError: The getter 'scrollOffsetCorrection' was called on null.
I/flutter (31410): Another exception was thrown: NoSuchMethodError: The method 'debugAssertIsValid' was called on null.
I/flutter (31410): Another exception was thrown: NoSuchMethodError: The getter 'visible' was called on null.
我真的不明白，如果我将它们直接作为列小部件的子项放置，它会工作得很好，但我需要性别位于行内，尝试寻找解决方案，但找不到任何解决办法，请大家帮帮忙，以下是我的代码
class EditUserProfile extends StatefulWidget {
static String id = 'edit-profile';
@override
_EditUserProfileState createState() => _EditUserProfileState();
}
enum Gender { male, female }
class _EditUserProfileState extends State
Gender _gender = Gender.male;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
iconTheme: IconThemeData(color: Colors.black),
title: Text(
"Edit Profile",
style: TextStyle(color: Colors.black),
),
actions: [
Padding(
padding: const EdgeInsets.all(8.0),
child: RaisedButton(
onPressed: null,
child: Text('Done'),
),
)
],
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: ListView(
children: [
InputField(
icon: Icon(
Icons.person,
color: Colors.white,
),
showText: true,
labelText: '昵称',
hintText: '人们怎么称呼你？',
),
SizedBox(
height: 10,
),
InputField(
icon: Icon(
Icons.phone_in_talk,
color: Colors.white,
),
showText: true,
labelText: '手机号码',
hintText: '人们如何联系你？',
),
SizedBox(
height: 10,
),
InputField(
icon: Icon(
FontAwesomeIcons.child,
color: Colors.white,
),
showText: true,
labelText: '年龄',
hintText: '你多大了？',
),
SizedBox(
height: 10,
),
InputField(
icon: Icon(
Icons.person,
color: Colors.white,
),
showText: true,
labelText: '性别',
hintText: '你是单身还是已婚？',
),
SizedBox(
height: 10,
),
Expanded(
child: Row(
children: [
RadioListTile
title: Text('男性'),
value: Gender.male,
groupValue: _gender,
onChanged: (Gender value) {
setState(() {
_gender = value;
});
},
),
RadioListTile
title: Text('女性'),
value: Gender.female,
groupValue: _gender,
onChanged: (Gender value) {
setState(() {
_gender = value;
});
},
),
],
),
),
InputField(
icon: Icon(
FontAwesomeIcons.locationArrow,
color: Colors.white,
),
showText: true,
labelText: '居住地',
hintText: '你住在哪里',
),
SizedBox(
height: 10,
),
InputField(
icon: Icon(
Icons.person,
color: Colors.white,
),
showText: true,
labelText: '感情状况',
hintText: '你是单身还是已婚？',
),
SizedBox(
height: 10,
),
Expanded(
child: Row(
children: [
RadioListTile
title: Text('男性'),
value: Gender.male,
groupValue: _gender,
onChanged: (Gender value) {
setState(() {
_gender = value;
});
},
),
RadioListTile
title: Text('女性'),
value: Gender.female,
groupValue: _gender,
onChanged: (Gender value) {
setState(() {
_gender = value;
});
},
),
],
),
),
],
),
),
);
}
}
我尝试给我的列一个固定的高度和宽度，但仍然没有运气。
child: Expanded(
child: Container(
width: double.infinity,
height: 200,
child: ListView(
children: [
InputField(
icon: Icon(
Icons.person,
color: Colors.white,
),
问题的原因是在Row widget外部没有使用IntrinsicHeight包裹，且每个RadioListTile widget没有使用Flexible包裹。
解决方法是将Row widget外部使用IntrinsicHeight包裹，并将每个RadioListTile widget使用Flexible包裹。修改后的代码如下：
class EditUserProfile extends StatefulWidget {
static String id = 'edit-profile';
_EditUserProfileState createState() => _EditUserProfileState();
}
enum Gender { male, female }
class _EditUserProfileState extends State
Gender _gender = Gender.male;
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
iconTheme: IconThemeData(color: Colors.black),
title: Text(
"Edit Profile",
style: TextStyle(color: Colors.black),
),
actions: [
Padding(
padding: const EdgeInsets.all(8.0),
child: RaisedButton(
onPressed: null,
child: Text('Done'),
),
)
],
),
body: ListView(
children: [
InputField(
icon: Icon(
Icons.person,
color: Colors.white,
),
showText: true,
labelText: 'Nickname',
hintText: 'What do they call you?',
),
SizedBox(
height: 10,
),
InputField(
icon: Icon(
Icons.phone_in_talk,
color: Colors.white,
),
showText: true,
labelText: 'Mobile Number',
hintText: 'How can people reach your cell?',
),
SizedBox(
height: 10,
),
InputField(
icon: Icon(
FontAwesomeIcons.child,
color: Colors.white,
),
showText: true,
labelText: 'Age',
hintText: 'How old are you?',
),
SizedBox(
height: 10,
),
InputField(
icon: Icon(
Icons.person,
color: Colors.white,
),
showText: true,
labelText: 'Gender',
hintText: 'Are you single or married?',
),
SizedBox(
height: 10,
),
IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Flexible(
child: RadioListTile
title: Text('Male'),
value: Gender.male,
groupValue: _gender,
onChanged: (Gender value) {
setState(() {
_gender = value;
});
},
),
),
Flexible(
child: RadioListTile
title: Text('Female'),
value: Gender.female,
groupValue: _gender,
onChanged: (Gender value) {
setState(() {
_gender = value;
});
},
),
),
],
),
),
InputField(
icon: Icon(
FontAwesomeIcons.locationArrow,
color: Colors.white,
),
showText: true,
labelText: 'Lives In',
hintText: 'Where do you reside',
),
SizedBox(
height: 10,
),
InputField(
icon: Icon(
Icons.person,
color: Colors.white,
),
showText: true,
labelText: 'Relationship Status',
hintText: 'Are you single or married?',
),
SizedBox(
height: 10,
),
],
),
);
}
}
在Flutter中，当我们在一个Row中添加一个ListTile时，可能会遇到ListView消失的问题。这个问题的解决方法是在ListView中添加shrinkwrap属性并将其设置为true。
ListView是Flutter中用于显示可滚动列表的一个常用组件。在默认情况下，ListView会根据其内容的大小来确定其自身的大小。然而，当我们将ListView放置在一个Row中并添加ListTile时，ListView的大小可能会超出屏幕范围，导致其不可见。
为了解决这个问题，我们可以在ListView中添加shrinkwrap属性，并将其设置为true。这将使ListView的大小根据其内容的大小进行调整，确保其适应屏幕的大小。
下面是一个示例代码，展示了如何在ListView中添加shrinkwrap属性：
Row(
children: [
Expanded(
child: ListView(
shrinkWrap: true,
children: [
ListTile(
title: Text('Item 1'),
),
ListTile(
title: Text('Item 2'),
),
ListTile(
title: Text('Item 3'),
),
],
),
),
],
)
通过在ListView中添加shrinkwrap属性并将其设置为true，我们可以解决在Row中添加ListTile时ListView消失的问题。这样，ListView将根据其内容的大小进行调整，确保其可见并适应屏幕的大小。