flutter - 通过容器垂直填充 ListView 瓦片 - Flutter

Question

我一直在尝试在我的 flutter 应用程序的卡片最左边放置一个线条指示器。我尝试了很多东西但没有用。

有一个确切的问题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

也许一种方法是使用 Stack

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

输出