为什么此列的子项显示彼此如此不同？他们不应该都显示相同吗？答案

【问题标题】：Why are this column's children displaying so differently from each other? Shouldn't they all be displaying the same?为什么此列的子项显示彼此如此不同？他们不应该都显示相同吗？
【发布时间】：2020-04-18 17:48:09
【问题描述】：

我在一个容器内显示一个列，该列用于包含一段文本和一个 ListView，其中包含许多带有复选框的 ToDo 项。但是，ListView 根本不显示。我不知道为什么会发生这种情况。

class NotesScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Container(
            padding: EdgeInsets.only(
              top: 20.0,
            ),
            height: 70.0,
            decoration: BoxDecoration(
              color: Color(0xFFFF674F),
              borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(20.0),
                bottomRight: Radius.circular(20.0),
              ),
            ),
            child: Column(
              children: <Widget>[
                Text(
                  'Note-Taker',
                  style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.w700,
                    fontSize: 20.0,
                  ),
                ),
                ListView(
                  children: <Widget>[
                    ListTile(
                      title: Text('Filler'),
                      trailing: Checkbox(
                        value: false,
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

问题是，您已将第二个 Column 嵌入到您的第一个容器中，该容器的高度仅为 70。您可能希望将其添加为列的第二个子项。由于您没有指定任何大小，因此您必须将其放在 Expanded 小部件中。

Scaffold(
  body: Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: <Widget>[
      Container(
        padding: EdgeInsets.only(
          top: 20.0,
        ),
        height: 70.0,
        decoration: BoxDecoration(
          color: Color(0xFFFF674F),
          borderRadius: BorderRadius.only(
            bottomLeft: Radius.circular(20.0),
            bottomRight: Radius.circular(20.0),
          ),
        ),
      ),
      Expanded(
        child: Column(
          children: <Widget>[
            Text(
              'Note-Taker',
              style: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.w700,
                fontSize: 20.0,
              ),
            ),
            Expanded(
              child: ListView(
                children: <Widget>[
                  ListTile(
                    title: Text('Filler'),
                    trailing: Checkbox(
                      onChanged: (value) {},
                      value: false,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    ],
  ),
);

【讨论】：

【解决方案2】：

你有你 ListView 在你的第二个 Column 试试这个

 Scaffold(
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Container(
            padding: EdgeInsets.only(
              top: 20.0,
            ),
            height: 70,
            decoration: BoxDecoration(
              color: Color(0xFFFF674F),
              borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(20.0),
                bottomRight: Radius.circular(20.0),
              ),
            ),
            child: Column(
              children: <Widget>[
                Text(
                  'Note-Taker',
                  style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.w700,
                    fontSize: 20.0,
                  ),
                ),
              ],
            ),
          ),
          Expanded(
            child: ListView(
              padding: EdgeInsets.all(0),
              shrinkWrap: true,
              children: <Widget>[
                CheckboxListTile(
                  title: Text('There would Normally be text here'),
                  value: true,
                  onChanged: (bool value) {},
                )
              ],
            ),
          ),
        ],
      ),
    );

让我知道这对你有什么作用

【讨论】：