Flutter : 코드의 각 목록 항목 사이에 구분자를 추가하려면 어떻게 해야 합니까?

Flutter : 코드의 각 목록 항목 사이에 구분자를 추가하려면 어떻게 해야 합니까?

목록에 구분자를 추가하려면 어떻게 해야 합니까?저는 안드로이드용으로 Flutter를 사용합니다.각 목록 항목 사이에 구분선을 추가하고 구분선을 색상화하고 스타일을 추가하고 싶습니다.

추가하려고 했습니다.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,

      ),
    );
  }
}
 

같은 일을 하는 데는 여러 가지 방법이 있습니다.여기서 비교해 보겠습니다.

짧은 정적 목록의 경우

사용하다ListTile.divideTiles

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.

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

마지막 항목을 제외한 모든 항목에 대해 두 개의 위젯을 반환합니다.그separatorBuilder구분선을 추가하는 데 사용됩니다.

마지막 항목 뒤에 구분선을 추가하는 경우

구분자 또는 상자 장식을 사용하는 사용자 지정 항목 위젯을 만듭니다.

구분 기호 사용

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

상자 장식 사용

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

구분선과 상자 장식은 선 높이와 색상에 따라 사용자 지정할 수 있습니다.구분 기호는 들여쓰기 옵션도 있지만 일부 패딩에서도 동일한 작업을 수행할 수 있는 상자 장식을 사용할 수 있습니다.

더 많은 스타일을 위하여

카드 사용

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

가장 올바른 방법은 ListView.separated를 사용하는 것입니다.

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

상자 장식을 사용하여 위젯을 컨테이너 안에 넣습니다.

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

최근에 나는 이 코드를 사용하여 구분자를 설정합니다.

ListView.separated(
      itemBuilder: (BuildContext context, int index) {
        return ListTile(
          title: Text("Hello", style: TextStyle(
              color: Theme
                  .of(context)
                  .primaryColor
          ),),

        );
      },
      separatorBuilder: (context, index) =>Divider(height: 1, color: Colors.green),
      itemCount: 30),

그리고 그것은 동작한다.

예를 들어 앱의 스크린샷을 추가했습니다.

시작에 대한 흥미로운 튜토리얼에서는 다음과 같은 솔루션을 제공합니다.

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

이렇게 하려면 홀수 행과 짝수 행을 고려하여 구분선을 추가해야 합니다.

또한 구분 기호를 구분 기호 클래스에 "색상"으로 표시하려면 다음과 같이 하십시오.

new Divider(color: Colors.purple);

이 문제를 확인하십시오.목록 보기.작성자는 클라이언트가 구분자를 지정하도록 해야 합니다. 이는 다음 사항을 명확히 합니다.

1. 동적 요소로 목록을 작성해야 하는 경우 현재로서는 이 문제를 혼자서 처리해야 합니다.행 위젯 빌딩에서 마지막 것을 제외하고는 아래에 열 같은 것이 있는 목록 구분 기호를 포함하는 것이 좋습니다(테스트 가능).index == listData.length - 1).

2. 그러나 예와 같이 모든 목록 데이터를 사전에 알고 있거나 데이터를 사용하지 않고 구축하는 경우ListView.builder그러면 명명된 생성자를 사용할 수 있고 사용해야 합니다.ListView.divideTiles

다음에 구분자만 추가():

         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.3

다른 방법, 특히 일반 비목록 보기의 경우:사용.for의 컬렉션(링크)에서... 연산자를 지정합니다.

Column(
   children: [
     for(var i=0; i<4; i+=1)
     ...[Container(height: 100, width: 100),
         Divider()
      ]])

가 질문은우접수가있정합다니고다근할리가▁to다니▁access▁that에 접근할 수 있다고 합니다.material.dart스타일링을 위한 (Android 용링타일스()ListTile그리고.Divider) 만약 당신이 쿠퍼티노 스타일을 원한다면, 우리는 다음을 할 수 있습니다.

1. 을 합니다.Column"" " " " " 를 합니다.Container높이 1로

    Column(
      children: <Widget>[
        row, // A custom Row
        Padding(
          padding: const EdgeInsets.only(
            left: 16,  // Adjust separator left padding.
            right: 16, // Adjust separator right padding.
          ),
          child: Container(
            height: 1,
            color: Styles.productRowDivider, // Custom style
          ),
        ),
      ],
    );
   

2. 그Divider는 서에사수없다에서 할 수 .cupertino.dart우리는 같은 것을 사용할 수 있습니다.Container와의기술에 의한 ListView.separated:

    ListView.separated(
      itemCount: 100,
      itemBuilder: (context, index) {
        return row;
      },
      separatorBuilder: (context, index) {
        return Container(
                height: 1,
                color: Styles.productRowDivider, // Custom style
              );
      },
    );
   

컨테이너를 사용하는 또 다른 방법입니다.

 ListTile(
        leading: Icon(Icons.home),
        title: Text('Home'),
 ),
 Container(height: 1, color: Colors.grey), //divider
 ListTile(
        leading: Icon(Icons.logout),
        title: Text('Logout'),
 ),

다음과 같은 컨테이너 만들기

Container(height: 1, color: Colors.grey),

그리고 다음과 같이 ListTile과 함께 추가합니다.

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

     return  Column(
         children: <Widget>[
      Container(height: 1, color: Colors.grey),  //Container for devider
      ListTile(                                  //Your tile item
      title: title(item.title),
      subtitle: subtitle(item.pubDate),
      leading: thumbnail(item.enclosure.url),
      trailing: rightIcon(),
      contentPadding: EdgeInsets.all(5.0),
      onTap: () => openFeed(item.link),
    )]);
  },
);

이제 내 스크린샷에서 최종 출력을 볼 수 있습니다.

: https://i.stack.imgur.com/EZuIg.jpg

언급URL : https://stackoverflow.com/questions/50687633/flutter-how-can-i-add-divider-between-each-list-item-in-my-code