如何在Flutter中创建按钮的列表视图？

Question

我正在尝试开发一个Flutter的应用程序，该应用程序具有用户可以选择的主题，并将其带到具有该主题信息的新页面。为此，我决定将按钮列表成单词，然后在其中滚动并选择一个主题。我现在有一个带有将用户带到另一个页面的按钮的代码，我在想我如何广告一个完全不同的按钮列表以及使页面滚动。

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'),
        ),
      ),
    );
  }
}

Answer 1

ListTile是您正在寻找的小部件。

Answer 2

我建议阅读 flutter 文档，特别是查看一些示例 -特别是股票示例，因为它完全符合您的要求。此外，布局教程可能会有所帮助，当您寻找特定的 UI 元素时，小部件目录是一个很好的起点。

但是文档的 TLDR 是您希望在主页上拥有一个包含所有项目的 ListView。每个项目都包含一个按钮和文本，或者您想要的任何内容。ListView 自动滚动。

如果列表视图中的项目除了一些文本或其他类似的简单内容之外都不同，您应该使用 ListView.builder，或者定义您自己的无状态/有状态小部件，它实际上根据您为每个项目传递的参数构建一个项目。

Answer 3

带有按钮的列表视图：

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,
                                      ),
                                    ),
                                  ],
                                )
                            ),
                          );
                        },
                      )

结果：

在列表视图上单击“心形”按钮