Ich versuche, eine App in Flattern zu entwickeln, die Themen enthält, die der Benutzer auswählen kann, und sie auf eine neue Seite mit Informationen zu diesem Thema bringt. Zu diesem Zweck habe ich beschlossen, dass eine Listenansicht von Schaltflächen ein Wort enthält, in dem sie scrollen und ein Thema auswählen können. Ich habe gerade Code mit einer Schaltfläche, die den Benutzer zu einer anderen Seite führt. Ich habe mich gefragt, wie ich eine Liste von Schaltflächen hinzufügen kann, die alle unterschiedlich sind, und die Hauptseite zum Scrollen.

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'),
        ),
      ),
    );
  }
}
5
Sean Theisen 19 Apr. 2018 im 20:47

3 Antworten

Beste Antwort

Ich würde empfehlen, die Flatterdokumentation zu lesen und insbesondere einige Beispiele zu betrachten - die Aktien fällt mir als eines ein, das genau das tut, wonach Sie fragen. Außerdem kann das Layout-Tutorial hilfreich sein, und das Widget-Katalog ist ein guter Ausgangspunkt, wenn Sie nach einem bestimmten UI-Element suchen.

Die TLDR der Dokumentation lautet jedoch, dass Sie eine ListView mit all Ihren Elementen auf der Hauptseite haben möchten. Jedes der Elemente enthält eine Schaltfläche und einen Text oder was auch immer Sie dort sein möchten. ListView scrollt automatisch.

Wenn die Elemente in der Listenansicht alle unterschiedlich sind, mit Ausnahme von Text oder etwas Einfachem, sollten Sie entweder einen ListView.builder verwenden oder ein eigenes Stateless / Stateful-Widget definieren, das tatsächlich ein Element aus Parametern erstellt, die Sie für jedes Element übergeben.

4
rmtmckenzie 19 Apr. 2018 im 19:37

Listenansicht mit Schaltfläche:

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

Ergebnis:

enter image description here

Die Herzschaltfläche kann in der Listenansicht angeklickt werden

5
biniam 3 Mai 2019 im 09:35

ListTile ist das Widget, nach dem Sie suchen.

2
Manos Serifios 1 Feb. 2019 im 16:11