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

Question

我正在尝试开发一个颤动的应用程序，该应用程序具有用户可以选择的主题，并将它们带到包含该主题信息的新页面。为此，我决定了按钮的列表视图，它们可以滚动并选择一个主题。我现在有代码，有一个按钮，将用户带到另一个页面，我想知道如何广告一个不同的按钮列表，以及要滚动的主页面。

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

我建议阅读flutter文档，特别是查看一些示例 - 特别考虑stocks示例，因为它正是您所要求的。此外，layout tutorial可能会有所帮助，widget catalog是您在寻找特定UI元素时的好地方。

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

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

Answer 2

带有按钮的列表视图：

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

结果：

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

Answer 3

ListTile是您要查找的小部件。