web-dev-qa-db-fra.com

diviseur de flottement: Comment pourrais-je ajouter un séparateur entre chaque ligne de mon code?

Comment pourrais-je ajouter un diviseur à la liste? J'utilise flatter pour Android. Je veux ajouter un séparateur entre chaque ligne et je veux coloriser le séparateur et ajouter des styles.

J'ai essayé d'ajouter new divider(); mais j'ai eu des erreurs. J'ai aussi essayé return new divider();.

Voici la capture d'écran de mon application:

Et voici mon code:

import 'package:flutter/material.Dart';
import 'package:flutter/foundation.Dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
          primarySwatch: Colors.purple,

          buttonTheme: const ButtonThemeData(
            textTheme: ButtonTextTheme.primary,
          )
      ),
      home: const MyHomePage(),
    );
  }
}

class Kitten {
  const Kitten({this.name, this.description, this.age, this.imageurl});

  final String name;
  final String description;
  final int age;
  final String imageurl;
}

final List<Kitten> _kittens = <Kitten>[
  Kitten(
      name: "kitchen",
      description: "mehraboon",
      age: 2,
      imageurl:
      "https://images.pexels.com/photos/104827/cat-pet-animal-domestic- 
      104827.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=350",
  ),
  Kitten(
      name: "garage",
      description: "khashen",
      age: 1,
      imageurl:
      "https://images.pexels.com/photos/4602/jumping-cute-playing-animals.jpg? 
      auto=compress&cs=tinysrgb&dpr=2&h=350",
  ),
  Kitten(
      name: "bedroom",
      description: "khar zoor",
      age: 5,
      imageurl:
      "https://images.pexels.com/photos/978555/pexels-photo-978555.jpeg? 
      auto=compress&cs=tinysrgb&dpr=2&h=350",
  ),
  Kitten(
      name: "living room",
      description: "chorto",
      age: 3,
      imageurl:
      "https://images.pexels.com/photos/209037/pexels-photo-209037.jpeg? 
      auto=compress&cs=tinysrgb&dpr=2&h=350",
  ),
];

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key key}) : super(key: key);

  Widget _dialogBuilder(BuildContext context, Kitten kitten) {
    return SimpleDialog(contentPadding: EdgeInsets.zero, children: [
      Image.network(kitten.imageurl, fit: BoxFit.fill),
      Padding(
          padding: const EdgeInsets.all(16.0),
          child:
          Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
            Text(kitten.name),
            Text('${kitten.age}'),
            SizedBox(
              height: 16.0,
            ),
            Text(kitten.description),
            Align(
              alignment: Alignment.centerRight,
              child: Wrap(
                children: [
                  FlatButton(onPressed: () {}, child: const
                  Text("noooo!"),color: Colors.red,),
                  Padding(padding: const EdgeInsets.all(2.0),),
                  RaisedButton(onPressed: () {}, child: const
                  Text("yesss!"),color: Colors.green)
                ],
              ),
            )
          ]))
    ]);
  }

  Widget _listItemBuilder(BuildContext context, int index) {
    return new GestureDetector(

      onTap: () => showDialog(
          context: context,
          builder: (context) => _dialogBuilder(context, _kittens[index])),
      child:
      Container(

        padding: EdgeInsets.all( 16.0),
        alignment: Alignment.centerLeft,
        child: Text(_kittens[index].name,
            style: Theme.of(context).textTheme.headline),

      ),


    ) ;

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Keys"),
        centerTitle: true,


      ),
      body: ListView.builder(
        itemCount: _kittens.length,
        itemExtent: 60.0,
        itemBuilder: _listItemBuilder,

      ),
    );
  }
}
16
Amin Joharinia

Il y a plusieurs façons de faire la même chose. Permettez-moi de les comparer ici.

Pour une courte liste statique

Utilisation ListTile.divideTiles

enter image description here

ListView(
  children: ListTile.divideTiles( //          <-- ListTile.divideTiles
      context: context,
      tiles: [
        ListTile(
          title: Text('Horse'),
        ),
        ListTile(
          title: Text('Cow'),
        ),
        ListTile(
          title: Text('Camel'),
        ),
        ListTile(
          title: Text('Sheep'),
        ),
        ListTile(
          title: Text('Goat'),
        ),
      ]
  ).toList(),
)

Pour une longue liste dynamique

Utilisation ListView.separated.

enter image description here

ListView.separated(
  itemCount: 100,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('$index sheep'),
    );
  },
  separatorBuilder: (context, index) {
    return Divider();
  },
)

Cela renvoie deux widgets pour chaque élément, à l'exception du dernier élément. Le separatorBuilder est utilisé pour ajouter le diviseur.

Pour ajouter un séparateur après le dernier article

Créez un widget d'élément personnalisé qui utilise un diviseur ou BoxDecoration.

Utilisation du diviseur

enter image description here

final items = ['Horse', 'Cow', 'Camel', 'Sheep', 'Goat'];

@override
Widget build(BuildContext context) {
  return ListView.builder(
    itemCount: items.length,
    itemBuilder: (context, index) {
      return Column(
        children: <Widget>[
          ListTile(
            title: Text(items[index]),
          ),
          Divider(), //                           <-- Divider
        ],
      );
    },
  );
}

Utiliser BoxDecoration

enter image description here

final items = ['Horse', 'Cow', 'Camel', 'Sheep', 'Goat'];

@override
Widget build(BuildContext context) {
  return ListView.builder(
    itemCount: items.length,
    itemBuilder: (context, index) {
      return Container(
        decoration: BoxDecoration( //                    <-- BoxDecoration
          border: Border(bottom: BorderSide()),
        ),
        child: ListTile(
          title: Text(items[index]),
        ),
      );
    },
  );
}

Divider et BoxDecoration sont tous deux personnalisables en fonction de la hauteur et de la couleur de la ligne. Divider a également une option de retrait, mais vous pouvez obtenir une BoxDecoration pour faire la même chose avec un certain rembourrage.

Pour plus de style

Utiliser une carte

enter image description here

final items = ['Horse', 'Cow', 'Camel', 'Sheep', 'Goat'];

@override
Widget build(BuildContext context) {
  return ListView.builder(
    itemCount: items.length,
    itemBuilder: (context, index) {
      return Card( //                           <-- Card
        child: ListTile(
          title: Text(items[index]),
        ),
      );
    },
  );
}
37
Suragch

La manière la plus correcte est d'utiliser ListView.separated

ListView.separated(
     itemCount: 25,
     separatorBuilder: (BuildContext context, int index) => Divider(),
     itemBuilder: (BuildContext context, int index) {
       return ListTile(
         title: Text('item $index'),
       );
     },
);
26
Daniil Yakovlev

Placez votre widget dans un conteneur avec BoxDecoration en tant que

Container(
   child: YourWidgetHere(),
   decoration: BoxDecoration(
      border: Border(bottom: BorderSide(color: Colors.black26))),
);
7
Dhiraj Sharma

Sur le didacticiel de prise en main de flutter , il est couvert, la solution proposée est la suivante:

  body: ListView.builder(
    itemCount: _kittens.length,
    itemExtent: 60.0,
    itemBuilder: (context, i) {
        // Add a one-pixel-high divider widget before each row in theListView.
        if (i.isOdd) return new Divider(color: Colors.purple); // notice color is added to style divider

        return _listItemBuilder();
      },
  ),
  ...

Cela devrait ajouter les séparateurs en tenant compte des rangées impaires et paires pour le faire.

Également pour colorer le séparateur pas "color" à la Classe de séparateur :

new Divider(color: Colors.purple);
6
FRECIA

Découvrez ce problème: ListView.builder devrait permettre aux clients de spécifier un diviseur Cela indique clairement que:

  1. si vous avez besoin de construire votre liste avec des éléments dynamiques, vous devrez pour l’instant régler vous-même ce problème. Je recommanderais dans la construction du widget de ligne, d'inclure un List Divider en bas avec une colonne ou quelque chose, à l'exception du dernier (vous pouvez tester index == listData.length - 1).

  2. Mais si, comme dans l'exemple que vous montrez, vous connaissez déjà toutes les données de la liste à l'avance ou si vous le construisez sans un ListView.builder, alors vous pouvez et devriez utiliser le constructeur nommé ListView.divideTiles

3
dsilveira

après this Ajoutez simplement Divider ():

         Column(
                children: <Widget>[
                  Container(
                    padding: EdgeInsets.all(16.0),
                    child: Column(
                      children: <Widget>[
                        Image.network(video["imageUrl"]),
                        Container(
                          height: 6.0,
                        ),
                        Text(
                          video["name"],
                          textScaleFactor: 1.05,
                          style: TextStyle(fontWeight: FontWeight.bold),
                        ),
                      ],
                    ),
                  ),
                  Divider(
                    color: Theme.of(context).primaryColor,
                  )
                ],
              );                                                                           
2
Dharmesh Mansata