如何在 Flutter 中将 List View 放入 children [] 中
How to put List View in children [], in Flutter
我需要帮助。我是 Flutter 和 Dart 的新手。我试图像这样将列表视图放在 children [],
中,这样我就可以在之后创建一个新行:
class ListViewColumn extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold(
body: new Container(
child: Column(
children: <Widget>[
new ListView(
children: <Widget>[
new ListTile(
title: Text('Name : Kareen'),
),
new ListTile(
title: Text('Class : 12th grade'),
),
new ListTile(
title: Text('Student Number : 27'),
)
],
),
new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new Column(
children: <Widget>[
Icon(
Icons.thumb_up_alt,
color: Colors.blue
),
Text('Like', style: new TextStyle(fontWeight: FontWeight.bold))
],
),
new Column(
children: <Widget>[
Icon(
Icons.chat_outlined,
color: Colors.black
),
Text('Comment', style: new TextStyle(fontWeight: FontWeight.bold))
],
),
new Column(
children: <Widget>[
Icon(
Icons.favorite,
color: Colors.pink
),
Text('Save', style: new TextStyle(fontWeight: FontWeight.bold))
],
),
],
)
],
), ), ); } }
我在互联网上寻找解决方案,但网站一直给我的信息是列表视图只能应用于 body: ,
和 child: ,
。我想知道是否有人可以帮助我。提前谢谢你。
看看。你错过了shrinkWrap: true
import 'package:flutter/material.dart';
class ListViewColumn extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: <Widget>[
new ListView(
shrinkWrap: true,
children: <Widget>[
new ListTile(
title: Text('Name : Kareen'),
),
new ListTile(
title: Text('Class : 12th grade'),
),
new ListTile(
title: Text('Student Number : 27'),
)
],
),
new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new Column(
children: <Widget>[
Icon(Icons.thumb_up_alt, color: Colors.blue),
Text('Like', style: new TextStyle(fontWeight: FontWeight.bold))
],
),
new Column(
children: <Widget>[
Icon(Icons.chat_outlined, color: Colors.black),
Text('Comment',
style: new TextStyle(fontWeight: FontWeight.bold))
],
),
new Column(
children: <Widget>[
Icon(Icons.favorite, color: Colors.pink),
Text('Save', style: new TextStyle(fontWeight: FontWeight.bold))
],
),
],
)
],
));
}
}
输出:
只需用 Expanded
小部件包裹 ListView
:
class ListViewColumn extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: <Widget>[
Expanded( /// insert this widget.
child: new ListView(
children: <Widget>[
new ListTile(
title: Text('Name : Kareen'),
),
new ListTile(
title: Text('Class : 12th grade'),
),
new ListTile(
title: Text('Student Number : 27'),
)
],
),
),
new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new Column(
children: <Widget>[
Icon(Icons.thumb_up_alt, color: Colors.blue),
Text('Like',
style: new TextStyle(fontWeight: FontWeight.bold))
],
),
new Column(
children: <Widget>[
Icon(Icons.chat_outlined, color: Colors.black),
Text('Comment',
style: new TextStyle(fontWeight: FontWeight.bold))
],
),
new Column(
children: <Widget>[
Icon(Icons.favorite, color: Colors.pink),
Text('Save',
style: new TextStyle(fontWeight: FontWeight.bold))
],
),
],
)
],
),
);
}
}
我需要帮助。我是 Flutter 和 Dart 的新手。我试图像这样将列表视图放在 children [],
中,这样我就可以在之后创建一个新行:
class ListViewColumn extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold(
body: new Container(
child: Column(
children: <Widget>[
new ListView(
children: <Widget>[
new ListTile(
title: Text('Name : Kareen'),
),
new ListTile(
title: Text('Class : 12th grade'),
),
new ListTile(
title: Text('Student Number : 27'),
)
],
),
new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new Column(
children: <Widget>[
Icon(
Icons.thumb_up_alt,
color: Colors.blue
),
Text('Like', style: new TextStyle(fontWeight: FontWeight.bold))
],
),
new Column(
children: <Widget>[
Icon(
Icons.chat_outlined,
color: Colors.black
),
Text('Comment', style: new TextStyle(fontWeight: FontWeight.bold))
],
),
new Column(
children: <Widget>[
Icon(
Icons.favorite,
color: Colors.pink
),
Text('Save', style: new TextStyle(fontWeight: FontWeight.bold))
],
),
],
)
],
), ), ); } }
我在互联网上寻找解决方案,但网站一直给我的信息是列表视图只能应用于 body: ,
和 child: ,
。我想知道是否有人可以帮助我。提前谢谢你。
看看。你错过了shrinkWrap: true
import 'package:flutter/material.dart';
class ListViewColumn extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: <Widget>[
new ListView(
shrinkWrap: true,
children: <Widget>[
new ListTile(
title: Text('Name : Kareen'),
),
new ListTile(
title: Text('Class : 12th grade'),
),
new ListTile(
title: Text('Student Number : 27'),
)
],
),
new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new Column(
children: <Widget>[
Icon(Icons.thumb_up_alt, color: Colors.blue),
Text('Like', style: new TextStyle(fontWeight: FontWeight.bold))
],
),
new Column(
children: <Widget>[
Icon(Icons.chat_outlined, color: Colors.black),
Text('Comment',
style: new TextStyle(fontWeight: FontWeight.bold))
],
),
new Column(
children: <Widget>[
Icon(Icons.favorite, color: Colors.pink),
Text('Save', style: new TextStyle(fontWeight: FontWeight.bold))
],
),
],
)
],
));
}
}
输出:
只需用 Expanded
小部件包裹 ListView
:
class ListViewColumn extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: <Widget>[
Expanded( /// insert this widget.
child: new ListView(
children: <Widget>[
new ListTile(
title: Text('Name : Kareen'),
),
new ListTile(
title: Text('Class : 12th grade'),
),
new ListTile(
title: Text('Student Number : 27'),
)
],
),
),
new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new Column(
children: <Widget>[
Icon(Icons.thumb_up_alt, color: Colors.blue),
Text('Like',
style: new TextStyle(fontWeight: FontWeight.bold))
],
),
new Column(
children: <Widget>[
Icon(Icons.chat_outlined, color: Colors.black),
Text('Comment',
style: new TextStyle(fontWeight: FontWeight.bold))
],
),
new Column(
children: <Widget>[
Icon(Icons.favorite, color: Colors.pink),
Text('Save',
style: new TextStyle(fontWeight: FontWeight.bold))
],
),
],
)
],
),
);
}
}