通过容器垂直填充 ListView 磁贴 - Flutter

Question

我一直在尝试在我的颤振应用程序中卡片的最左边放置一个线条指示器。我已经尝试了很多东西，但没有奏效。

有一个确切的问题here，这实际上是我一直试图解决的同一个问题。

接受的解决方案的问题是它限制了硬编码值的高度，这是我不想要的。而是颜色应该自动填充卡片的高度。

问题

我已经尝试了所有三种解决方案，但没有一个适合我的用例。

first solution 的输出 在这里，我必须将值硬编码为更大的值，以便所有显示的文本都位于其中。我觉得这不是解决方案。

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 ~~~~~~~~~~~~~~~~~~~~~~~~

chip goes outside

来自Second solution 的输出 这根本不显示任何内容。

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 ~~~~~~~~~~~~~~~~~~~~~~~~

No output at all

来自last solution 的输出 容器没有颜色。 There's no color from the container

非常感谢。

更新 1（格林威治标准时间 2020 年 4 月 6 日星期一晚上 8:16）

添加了代码和 repo 以便于复制。

Repo

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

Answer 1

也许一种方法是使用堆栈

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

输出