Заполнить листы ListView вертикально контейнером - Flutter - PullRequest
2 голосов
/ 06 апреля 2020

Я пытался поместить линейный индикатор в крайнее левое поле карты в моем приложении флаттера. Я много чего перепробовал, но ничего не вышло.

Здесь есть точный вопрос здесь , который фактически является той же проблемой, которую я пытался решить.

Проблема с принятым решением состоит в том, что оно ограничивает высоту жестко закодированного значения, которое я не хочу. Скорее цвет должен автоматически заполнить высоту карты.

Проблема

enter image description here

Я перепробовал все три решения и ни один из них не подходит для моего варианта использования.

Вывод из первое решение Здесь я должен жестко закодировать значение в нечто большее, чтобы весь отображаемый текст находился внутри него. Это то, что я считаю не решением.

Card(
            key: ObjectKey(noteList[index]),
            elevation: 2.0,
            child: IntrinsicHeight(
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  Container(
                    width: 4,
                    color: Color(noteList[index].intcolor),
                  ),
                  Flexible(
                    flex: 100,
                    child: ListTile(
~~~~~~~~~~~~~~~~~ SNIP ~~~~~~~~~~~~~~~~~~~~~~~~

чип выходит наружу

Выход из Второе решение Это ничего не показывает все.

Card(
            key: ObjectKey(noteList[index]),
            elevation: 2.0,
            child: Row(
              children: <Widget>[
                Expanded(
                  flex: 1,
                  child: Container(
                    constraints: BoxConstraints.expand(),
                    color: Color(noteList[index].intcolor),
                  ),
                ),
                Flexible(
                  flex: 100,
                  child: ListTile(
~~~~~~~~~~~~~~~~~ SNIP ~~~~~~~~~~~~~~~~~~~~~~~~

Нет вывода вообще

Вывод последнее решение Нет цвета из контейнера. Нет цвета из контейнера

Большое спасибо.

Обновление 1 (понедельник, 6 апреля 2020 года, 20:16 по Гринвичу)

Добавлен код и репо для легкой репликации.

Репо

main.dart

import 'package:flutter/material.dart';

void main() {
  List<String> notes = [
    "fluttermaster.com",
    "Update Android Studio to 3.3",
    "Something long Something long Something long Something long Something long Something long",
  ];

  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text("Simple Note ListView"),
      ),
      body: Container(
          color: Colors.white10,
          padding: EdgeInsets.all(16.0),
          child: HomePage(notes)),
    ),
  ));
}

class HomePage extends StatelessWidget {
  final List<String> notes;

  HomePage(this.notes);
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: notes.length,
      itemBuilder: (context, pos) {
        return Padding(
            padding: EdgeInsets.only(bottom: 16.0),
            child: Card(
              elevation: 2.0,
              child: Row(
                // key: _cardKey,
                children: <Widget>[
                  Flexible(
                    flex: 1,
                    child: Container(
                      // -------------------- This here ----------------------------------------------
                      // FixMe : This shouldn't be hardcoded, rather it should fill the height of it's parent element, in this case card
                      // https://medium.com/@diegoveloper/flutter-widget-size-and-position-b0a9ffed9407
                      height: 71,
                      color: Colors.green,
                      // -------------------- This here ----------------------------------------------
                    ),
                  ),
                  Flexible(
                    flex: 100,
                    child: ListTile(
                      // For center alignment from vertical and horizontal : https://stackoverflow.com/a/51546279
                      // Since using CircleAvatar does this but it decreases size of icon too : https://github.com/flutter/flutter/issues/16061
                      leading: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: <Widget>[
                          Icon(Icons.receipt),
                        ],
                      ),
                      title: Text(
                        notes[pos],
                      ),
                      subtitle: Row(
                        mainAxisSize: MainAxisSize.min,
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Text(notes[pos].substring(0, 10)),
                          // What is the best way to optionally include a widget in a list of children
                          // https://github.com/flutter/flutter/issues/3783#issuecomment-506019822
                          if ((pos % 2) == 0)
                            Chip(
                              avatar: CircleAvatar(
                                backgroundColor: Colors.grey.shade800,
                                child: Icon(Icons.timer),
                              ),
                              label: Text('2FA'),
                            ),
                        ],
                      ),
                      trailing: Padding(
                        padding: EdgeInsets.all(10),
                        child: Wrap(
                            spacing: 10,
                            direction: Axis.vertical,
                            alignment: WrapAlignment.spaceEvenly,
                            children: <Widget>[
                              IconButton(
                                icon: Icon(
                                  Icons.check,
                                  color: Colors.grey,
                                ),
                                onPressed: () {},
                              )
                            ]),
                      ),
                      onTap: () {},
                    ),
                  ),
                ],
              ),
            ));
      },
    );
  }
}

1 Ответ

1 голос
/ 07 апреля 2020

Возможно, один из способов сделать это - использовать стек

ListView.builder(
      itemCount: notes.length,
      itemBuilder: (context, pos) {
        return Padding(
          padding: EdgeInsets.all(8),
          child: Stack(
            children: <Widget>[
              Card(
                margin: EdgeInsets.zero,
                child: ListTile(
                  leading: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      Icon(Icons.receipt),
                    ],
                  ),
                  title: Text(
                    notes[pos],
                  ),
                  subtitle: Row(
                    mainAxisSize: MainAxisSize.min,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Text(notes[pos].substring(0, 10)),
                      if ((pos % 2) == 0)
                        Chip(
                          avatar: CircleAvatar(
                            backgroundColor: Colors.grey.shade800,
                            child: Icon(Icons.timer),
                          ),
                          label: Text('2FA'),
                        ),
                    ],
                  ),
                  trailing: Padding(
                    padding: EdgeInsets.all(10),
                    child: Wrap(
                        spacing: 10,
                        direction: Axis.vertical,
                        alignment: WrapAlignment.spaceEvenly,
                        children: <Widget>[
                          IconButton(
                            icon: Icon(
                              Icons.check,
                              color: Colors.grey,
                            ),
                            onPressed: () {},
                          )
                        ]),
                  ),
                  onTap: () {},
                ),
              ),
              Positioned(
                top: 0,
                bottom: 0,
                child: Container(
                  width: 5,
                  color: Colors.green,
                ),
              )
            ],
          ),
        );
      },
    )

Выход

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...