android - 如何在 flutter 中创建按钮 ListView ？

Question

我正在尝试在 flutter 中开发一个应用程序，该应用程序具有用户可以选择的主题，并将它们带到包含该主题信息的新页面。为此，我决定将按钮 ListView 放在单词中，它们可以在其中滚动并选择一个主题。我现在的代码有一个按钮，可以将用户带到另一个页面，我想知道如何添加一个所有不同的按钮列表，以及滚动的主页。

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

带按钮的 ListView :

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

结果:

心形按钮在 ListView 上是可点击的