flutter - 如何在 ListView 项目中展开列？

Question

我有一个小部件，用作ListView. 它是这样的：

Widget build(BuildContext context) {
  return Container(
    padding: EdgeInsets.symmetric(horizontal: 32, vertical: 24),
    child: Row(
      children: [
        Container(
            width: 100,
            height: 100,
            decoration: BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.all(Radius.circular(16)))),
        SizedBox(width: 24),
        Expanded(
          child: Container(
            color: Colors.yellow,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text("Something",
                    style: TextStyle(
                        color: Colors.deepPurple,
                        fontSize: 20,
                        fontWeight: FontWeight.bold)),
                SizedBox(height: 4),
                Text("Something2"),
                Text("Something3")
              ],
            ),
          ),
        )
      ],
    ),
  );
}

这就是我创建的方式ListView：

Widget build(BuildContext context) {
  return ListView.builder(
    itemCount: 10,
    itemBuilder: (context, index) {
      return MyItemWidget();
    },
  );
}

但是，这会产生以下结果：

---

您能否建议我如何使文本从项目顶部垂直开始，而不是在中心？

作为奖励，我会对如何使黄色盒子占据整个项目的高度感兴趣。但这不是必需的。

像这样的东西将是所需的输出：

或“奖金”：

标签： flutterflutter-layout

Answer 1

您可以按照以下代码段设置crossAxisAlignment您的小部件：Row

Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 32, vertical: 24),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
              width: 100,
              height: 100,
              decoration: BoxDecoration(
                  color: Colors.blue,
                  borderRadius: BorderRadius.all(Radius.circular(16)))),
          SizedBox(width: 24),
          Expanded(
            child: Container(
              color: Colors.yellow,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text("Something",
                      style: TextStyle(
                          color: Colors.deepPurple,
                          fontSize: 20,
                          fontWeight: FontWeight.bold)),
                  SizedBox(height: 4),
                  Text("Something2"),
                  Text("Something3")
                ],
              ),
            ),
          )
        ],
      ),
    );
  }