web-dev-qa-db-ja.com

フラッターディバイダー：コードの各行の間にディバイダーを追加するにはどうすればよいですか？

リストに仕切りを追加するにはどうすればよいですか？ Androidにはflatterを使用しています。各行の間に仕切りを追加し、仕切りを色付けしてスタイルを追加したい。

new divider();を追加しようとしましたが、エラーが発生しました。 return new divider();も試しました。

これが私のアプリのスクリーンショットです：

そして、ここに私のコードがあります：

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,

      ),
    );
  }
}
androidflutter
16
Amin Joharinia

同じことを行う方法はいくつかあります。ここで比較してみましょう。

短い静的リストの場合

つかいます 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(),
)

長い動的リストの場合

つかいます ListView.separated。

enter image description here

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

これは、最後のアイテムを除くすべてのアイテムに対して2つのウィジェットを返します。 separatorBuilderは、仕切りを追加するために使用されます。

最後のアイテムの後に仕切りを追加する場合

Dividerまたは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 Column(
        children: <Widget>[
          ListTile(
            title: Text(items[index]),
          ),
          Divider(), //                           <-- Divider
        ],
      );
    },
  );
}

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とBoxDecorationは両方とも、行の高さと色に関してカスタマイズ可能です。 Dividerにはインデントオプションもありますが、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 Card( //                           <-- Card
        child: ListTile(
          title: Text(items[index]),
        ),
      );
    },
  );
}
37
Suragch

最も正しい方法は、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

BoxDecorationを使用して、ウィジェットをコンテナ内に配置します

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

flutter入門チュートリアル で説明されていますが、彼らが提供するソリューションは次のようなものです：

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

そのためには、奇数行と偶数行を考慮に入れて仕切りを追加する必要があります。

また、ディバイダーpas "color"を Divider Class に色付けします：

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

この問題をチェックしてください： ListView.builderはクライアントに区切りを指定させるべきです それは以下を明確にします：

  1. 動的な要素を使用してリストを作成する必要がある場合は、今のところ、この問題に自分で対処する必要があります。行ウィジェットの作成では、最後の列を除いて、列または何かの下部に List Divider を含めることをお勧めします（index == listData.length - 1をテストできます）。

  2. ただし、表示する例のように、すべてのリストデータを事前に知っている場合、またはListView.builderなしで作成する場合は、名前付きコンストラクタListView.divideTilesを使用できます。

3
dsilveira

次の this 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