Поместите разделитель после текста в - вложенный вид списка.строитель флаттера

#flutter #dart

Вопрос:

Моя цель — поставить Divider строку после текста внутреннего ListView.builder .

Как это можно сделать?

   List<String> list1 = ["pppp", "qqqq", "rrrr"];
  List<String> list2 = ["aaaa", "bbbb", "cccc"];

  @override
  Widget build(BuildContext ctxt) {
    return new Scaffold(
      body: new Column(
        children: <Widget>[

          new Expanded(
            child: new ListView.builder(
                itemCount: list1.length,
                itemBuilder: (BuildContext ctxt, int Index) {
                  
                  return new ListView.builder(
                      shrinkWrap: true,
                      physics: ClampingScrollPhysics(),
                      itemCount: list2.length,

                      itemBuilder: (BuildContext ctxt, int Index) {
                        return new Text(
                          list2[Index],
                          style: TextStyle(color: Colors.green, fontSize: 25),
                        );
                      }
                    );
                }),
          ),
        ],
      ),
    );
  }

Ответ №1:

Вы можете добавить разделитель, разместив SizedBox его, как показано в приведенном ниже коде:

 List<String> list1 = ["pppp", "qqqq", "rrrr"];
List<String> list2 = ["aaaa", "bbbb", "cccc"];

@override
Widget build(BuildContext ctxt) {
  return new Scaffold(
    body: new Column(
      children: <Widget>[
        new Expanded(
          child: Column(
            children: [
              new ListView.builder(
                  itemCount: list1.length,
                  itemBuilder: (BuildContext ctxt, int Index) {
                    return new ListView.builder(
                        shrinkWrap: true,
                        physics: ClampingScrollPhysics(),
                        itemCount: list2.length,
                        itemBuilder: (BuildContext ctxt, int Index) {
                          return Text(
                            list2[Index],
                            style: TextStyle(color: Colors.green, fontSize: 25),
                          );
                        });
                  }),
              Divider(
                height: 3,
                thickness: 1,
                indent: 10, // Space at the start.
                endIndent: 10, // Space at the end.
              ),
            ],
          ),
        ),
      ],
    ),
  );
}

Пожалуйста, измените высоту по SizedBox мере необходимости. Надеюсь, это ответ на ваш вопрос.

1. Чтобы добавить к этому, вы также можете использовать встроенный класс разделителя вместо SizedBox. Видишь api.flutter.dev/flutter/material/Divider-class.html

2. Это создает разделитель под каждым текстом list2. Я хочу, чтобы он создавал разделитель только после отображения всех элементов list2.

3. Я обновил решение, проверьте и посмотрите, работает ли оно.

Ответ №2:

Давайте попробуем с ListView.separated

   List<String> list1 = ["pppp", "qqqq", "rrrr"];
  List<String> list2 = ["aaaa", "bbbb", "cccc"];

  @override
  Widget build(BuildContext ctxt) {
    return new Scaffold(
      body: new Column(
        children: <Widget>[

          new Expanded(
            child: new ListView.separated(
                itemCount: list1.length,
                itemBuilder: (BuildContext ctxt, int Index) {

                  return new ListView.builder(
                      shrinkWrap: true,
                      physics: ClampingScrollPhysics(),
                      itemCount: list2.length,

                      itemBuilder: (BuildContext ctxt, int Index) {
                        return new Text(
                          list2[Index],
                          style: TextStyle(color: Colors.green, fontSize: 25),
                        );

                      },
                  );
                },
              separatorBuilder: (context, build)=>Divider(
                thickness: 1,
                color: Color(0xff002540).withOpacity(.1),
              ),
            ),
          ),
        ],
      ),
    );
  }

Выход:

1. А также использовать как для ListBuilder

2. Я попробовал. Это фактически рисует линию под каждым элементом list2. Я хочу нарисовать линию после того, как будут показаны все элементы list2 .

3. Отредактировано ответом, пожалуйста, взгляните

Ответ №3:

Вы можете использовать ListView.подробнее об этом <a rel=»noreferrer noopener nofollow» href=»https://medium.com/flutter-community/flutter-adding-separator-in-listview-c501fe568c76#:~:text=separated.-,ListView.,indices ≥ 0 andhttps://medium.com/flutter-community/flutter-adding-separator-in-listview-c501fe568c76#:~:text=separated.-,ListView.,индексы ≥ 0 и< Количество элементов .