web-dev-qa-db-fra.com

Comment passer plusieurs widgets en tant qu'enfants dans Flutter?

J'ai récemment commencé à apprendre Flutter et j'ai parcouru la documentation. Je travaille sur cette petite application, où l'écran a un bouton en haut de l'écran et une liste en dessous.

Chaque fois que je passe RaisedButton avec un widget ListView dans un autre widget ListView ou Column, son erreur de lancement.

I/flutter ( 4734): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 4734): The following assertion was thrown during performResize():
I/flutter ( 4734): Vertical viewport was given unbounded height.
I/flutter ( 4734): Viewports expand in the scrolling direction to fill their container.
////MORE LINES OF ERRORS/////

Voici le code sur lequel j'ai travaillé:

import 'package:flutter/material.Dart';

void main() {
  runApp(ListDemo(
    items: new List<ListItem>.generate(
      100,
          (i) => i % 6 == 0
          ? new HeadingItem("Heading $i")
          : new MessageItem("Sender $i", "Message body $i"),
    ),
  ));
}

// The base class for the different types of items the List can contain
abstract class ListItem {}

// A ListItem that contains data to display a heading
class HeadingItem implements ListItem {
  final String heading;

  HeadingItem(this.heading);
}

// A ListItem that contains data to display a message
class MessageItem implements ListItem {
  final String sender;
  final String body;

  MessageItem(this.sender, this.body);
}

class ListDemo extends StatelessWidget {
  final List<ListItem> items;
  ListDemo({Key key, @required this.items}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    final ListView listView = ListView.builder(
      itemCount: items.length,
      itemBuilder: (context, index) {
        final item = items[index];

        if (item is HeadingItem) {
          return new ListTile(
            title: new Text(
              item.heading,
              style: Theme.of(context).textTheme.headline,
            ),
          );
        } else if (item is MessageItem) {
          return new ListTile(
            title: new Text(item.sender),
            subtitle: new Text(item.body),
          );
        }
      },
    );

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Lists'),
        ),
        body: ListView( //Tried using ListView, Column.. None of them help solving the issue
          children: <Widget>[
            RaisedButton(
              onPressed: null,
              child: Text('Sample Button'),
            ),
            Container(
              child: listView,
            )
        ]
      )
      )
    );
  }
}

S'il vous plaît, aidez-moi à résoudre ce problème de faire savoir, comment passer plusieurs enfants, et veuillez également faire comprendre le concept.

MODIFIÉ

Une des solutions possibles a suggéré d'encapsuler ListView avec la classe Expanded. Quand je l'ai fait, il m'a lancé une erreur comme ci-dessous:

I/flutter ( 4190): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
I/flutter ( 4190): The following assertion was thrown building NotificationListener<KeepAliveNotification>:
I/flutter ( 4190): Incorrect use of ParentDataWidget.
I/flutter ( 4190): Expanded widgets must be placed inside Flex widgets.
I/flutter ( 4190): Expanded(no depth, flex: 1, dirty) has no Flex ancestor at all.

J'ai donc enveloppé tout le code du widget dans Flex comme ci-dessous:

      Flex(
        direction: Axis.vertical,
        children: <Widget>[
          ListView(
            children: <Widget>[
              RaisedButton(
               onPressed: null,
               child: Text('Snackbar'),
              ),
              Expanded(
               child: listView
              )
             ],
            )
          ],
        )

mais ensuite ça m'a jeté cette erreur:

I/flutter ( 4388): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 4388): The following assertion was thrown during performResize():
I/flutter ( 4388): Vertical viewport was given unbounded height.
I/flutter ( 4388): Viewports expand in the scrolling direction to fill their container.In this case, a vertical
I/flutter ( 4388): viewport was given an unlimited amount of vertical space in which to expand. This situation
I/flutter ( 4388): typically happens when a scrollable widget is nested inside another scrollable widget.
dartflutterflutter-layout
4
starlight

Cette question est déjà répondue ici

Impossible d'ajouter un ListView dans Flutter

Si vous utilisez un scrollable view(Listview) inside another scrollable view, le inner scrollable view ne sait pas how much height it should occupy. Vous pouvez indiquer à la vue déroulante intérieure combien de hauteur cela devrait prendre en utilisant un widget Expanded.

4
Vinoth Kumar