Kind ListView-innerhalb der ListView Eltern

Was ist der bevorzugte Weg ist, um ein verschachteltes ListView-Steuerelement, oder in anderen Worten, ListView-Widgets enthalten könnten, innerhalb einer scrollbaren Eltern?

Stellen Sie sich eine "Berichte-Seite", wo ein Abschnitt ist eine detaillierte Liste.

  • Ich stehe vor demselben Problem, können Sie mir bitte helfen? wie Sie diese umsetzen.
InformationsquelleAutor Paul | 2017-07-23
  1. 13

    Wenn Sie wollen, um die innere ListView werden scrollbaren unabhängig von der scroll-Ansicht, die Sie verwenden sollten NestedScrollView. Verwenden Sie andernfalls einen CustomScrollView.

    Hier ist etwas code zur Veranschaulichung der NestedScrollView Ansatz.

    Kind ListView-innerhalb der ListView Eltern

    import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            new SliverAppBar(
              pinned: true,
              title: new Text('Flutter Demo'),
            ),
          ];
        },
        body: new Column(
          children: <Widget>[
            new FlutterLogo(size: 100.0, colors: Colors.purple),
            new Container(
              height: 300.0,
              child: new ListView.builder(
                itemCount: 60,
                itemBuilder: (BuildContext context, int index) {
                  return new Text('Item $index');
                },
              ),
            ),
            new FlutterLogo(size: 100.0, colors: Colors.orange),
          ],
        ),
      ),
    );
  }
}
    • Dies gilt nicht, scrollen Sie in der Flutterlogo komplett. Es bewegt sich nicht mehr. Wie kann ich das scrollen der ganze container? Ich meine, dass die FlutterLogo ist komplett unsichtbar?
    InformationsquelleAutor Collin Jackson
  2. 39

    Für Kind ListView verwenden Sie diesen parameter:

    shrinkWrap: true,
physics: ClampingScrollPhysics(),
    • Dies funktioniert nicht für mich arbeiten, wenn das Kind die Listenansicht ist eingebettet in eine scrollBar eingebettet in eine ScrollConfiguration eingebettet in eine Container
    • kurz und nützlich
    • Vielen Dank für die ClampingScrollPhysics() 😀
    • Dies funktioniert für die verschachtelte ListView, die innerhalb einer übergeordneten ListView! Danke!
    • Dies sollte die akzeptierte Antwort
    • Danke, ClampingScrollPhysics() im Grunde fügt die Länge der verschachtelten Bildlaufleiste, um den gesamten Bildschirm. Sehr nützlich, danke !
    • Ich habe verwendet, Singlechildscrollview für Haupt-Seite scrollen Sie und in es die ich verwendet habe-Container für fix-Daten und nach, dass listview.generator, aber ich möchte meine Liste Daten anzeigen Blättern Sie mit meinem Haupt-scroll-view nicht saperated.
    • Es funktioniert nur für einen speziellen Fall, wie sich Eltern und Kind listviews sind nur normale ListView(children: [...]). Es scheitert für ListView.builder(...)
    • was bedeutet das eigentlich tun?
    • Retten meinen Tag, tks! Ich war gekämpft, mit SliverList.

    InformationsquelleAutor Serdar Polat
  3. 0

    Screenshot:

    Kind ListView-innerhalb der ListView Eltern

    Code: 

    var _container = Container(
  height: 200,
  color: Colors.blue,
  margin: EdgeInsets.symmetric(vertical: 10),
);

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text("ListView")),
    body: Padding(
      padding: const EdgeInsets.all(40.0),
      child: ListView( //parent ListView
        children: <Widget>[
          _container,
          _container,
          Container(
            height: 200, //give it a fixed height constraint
            color: Colors.teal,
            //child ListView
            child: ListView.builder(itemBuilder: (_, i) => ListTile(title: Text("Item ${i}"))),
          ),
          _container,
          _container,
          _container,
        ],
      ),
    ),
  );
}
    InformationsquelleAutor CopsOnRoad
Schreibe einen Kommentar