[英]How do I create a list view of buttons in flutter?
I am trying to develop an app in flutter, that has topics that the user can select and will bring them to a new page with info on that topic. 我正在尝试开发一个颤动的应用程序,其中包含用户可以选择的主题,并将它们带到包含该主题信息的新页面。 To do this I decided a list view of buttons would word, where they can scroll and select a topic. 为此,我决定了按钮的列表视图,它们可以滚动并选择一个主题。 I have code right now that has a button that brings the user to another page, I was wondering how I could ad a list of buttons that are all different, and the main page to have scrolling. 我现在有一个代码,它有一个按钮,将用户带到另一个页面,我想知道如何广告一个不同的按钮列表,以及滚动的主页面。
import 'package:flutter/material.dart';
void main() => runApp(new MainScreen());
class MainScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold (
appBar: new AppBar(
title: new Text('First Screen'),
),
body: new Center(
child: new RaisedButton(
child: new Text('Launch to new screen'),
onPressed: () {
Navigator.push(
context,
new MaterialPageRoute(builder: (context) => new
SecondScreen()),
);
},
),
),
);
}
}
class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Second Screen"),
),
body: new Center(
child: new RaisedButton(
onPressed: () {
Navigator.pop(context);
},
child: new Text('Go back'),
),
),
);
}
}
List View with button: 带按钮的列表视图:
class SongDetail {
String strTitle;
var isFavorite = false;
SongDetail (this.strTitle, this.isFavorite);
}
List<SongDetail> arrSongList = [];
ListView.builder(
itemCount: arrSongList.length,
itemBuilder: (BuildContext context, int index) {
return new GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
CardDemo(arrSongList[index])));
},
child: Container(
height: 45.0,
decoration: BoxDecoration(
),
child: new Column(
children: <Widget>[
Container(
padding: EdgeInsets.only(left: 15.0, right: 15.0),
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Container(
child: Text(
arrSongList[index].strTitle,
textAlign: TextAlign.left,
style: TextStyle(
fontSize: AppSetting.appFontSize),
maxLines: 1,
),
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(10.0), topRight: Radius.circular(10.0))
),
),
new GestureDetector(
onTap: () {
setState(() {
arrSongList[index].isFavorite =
!arrSongList[index].isFavorite;
});
},
child: new Container(
margin: const EdgeInsets.all(0.0),
child: new Icon(
arrSongList[index].isFavorite
? Icons.favorite
: Icons.favorite_border,
color: Colors.red,
size: 30.0,
)),
),
],
),
),
Container(
padding: EdgeInsets.only(
left: 15.0, right: 15.0, top: 0.0),
child: Container(
color: AppSetting.appBgColor,
height: 1.0,
),
),
],
)
),
);
},
)
Result: 结果:
Heart button is clickable on listview 可以在listview上单击心形按钮
I'd recommend reading the flutter documentation and in particular looking at some of the examples - the stocks example in particular comes to mind as one that does exactly what you're asking for. 我建议阅读flutter文档,特别是查看一些示例 - 尤其是股票示例,它会完全符合您的要求。 Also, the layout tutorial could be helpful, and the widget catalog is a good place to start when you're looking for a particular UI element. 此外, 布局教程可能会有所帮助,当您查找特定的UI元素时, 窗口小部件目录是一个很好的起点。
But the TLDR of the documentation is that you want to have a ListView with all your items on the main page. 但是文档的TLDR是你希望在主页面上有一个包含所有项目的ListView。 Each of the items would contain a button and text, or whatever you want to be there. 每个项目都包含一个按钮和文本,或者您想要的任何内容。 ListView scrolls automatically. ListView自动滚动。
If the items in the listview are all different except some text or something else simple like that, you should either use a ListView.builder, or define your own Stateless/Stateful widget that actually builds an item from parameters you pass in for each item. 如果列表视图中的项目除了某些文本或类似的其他内容之外都是不同的,您应该使用ListView.builder,或者定义您自己的无状态/有状态窗口小部件,它实际上根据您为每个项目传入的参数构建项目。
ListTile是您要查找的小部件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.