Flutter应用添加ListView代码后卡顿无直接崩溃提示求助

你遇到的卡顿和报错是因为Column与ListView的布局约束冲突：Column默认会让子组件尽可能占用垂直空间，而ListView本身会试图获取无限垂直高度，两者叠加触发Flutter布局错误，进而导致渲染卡顿甚至崩溃。

以下三种方法可根据你的需求选择：

方法1：让ListView自适应内容高度 #

给ListView添加shrinkWrap: true属性，让它根据子组件总高度确定自身尺寸，不再试图占用无限空间：

ListView(
  shrinkWrap: true, // 添加该属性
  children: <Widget>[
    const SizedBox(height: 10,),
    const Padding(
      padding: EdgeInsets.symmetric(horizontal: 10),
      child: Divider(color: Colors.black, height: 30,),
    ),
    Card(
      margin: const EdgeInsets.all(10),
      elevation:20,
      color: Colors.purple[200],
      child: const ListTile(
        title: Text("Kadriye Macit"),
        subtitle: Text("Ankara"),
        trailing: Icon(Icons.call),
      ),
    ),
  ],
)

方法2：让ListView占用Column剩余空间 #

如果需要ListView独立滚动，把它放在Expanded组件中，自动填充Column内除按钮外的剩余空间：

Column(
  children: [
    ElevatedButton(
      child: const Text("Back!", style: TextStyle(fontSize: 20)),
      onPressed: () => Navigator.pop(context),
    ),
    // 用Expanded包裹ListView
    Expanded(
      child: ListView(
        children: <Widget>[
          const SizedBox(height: 10,),
          const Padding(
            padding: EdgeInsets.symmetric(horizontal: 10),
            child: Divider(color: Colors.black, height: 30,),
          ),
          Card(
            margin: const EdgeInsets.all(10),
            elevation:20,
            color: Colors.purple[200],
            child: const ListTile(
              title: Text("Kadriye Macit"),
              subtitle: Text("Ankara"),
              trailing: Icon(Icons.call),
            ),
          ),
        ],
      ),
    )
  ]
)

方法3：让整个Column可滚动 #

若希望按钮与列表一起滚动，用SingleChildScrollView包裹整个Column：

body: Container(
  alignment: Alignment.center,
  padding: const EdgeInsets.all(32),
  height: 400,
  width: 300,
  // 用SingleChildScrollView包裹Column
  child: SingleChildScrollView(
    child: Column(
      children: [
        ElevatedButton(
          child: const Text("Back!", style: TextStyle(fontSize: 20)),
          onPressed: () => Navigator.pop(context),
        ),
        ListView(
          shrinkWrap: true, // 需添加该属性
          physics: NeverScrollableScrollPhysics(), // 禁止ListView自身滚动，避免嵌套冲突
          children: <Widget>[
            const SizedBox(height: 10,),
            const Padding(
              padding: EdgeInsets.symmetric(horizontal: 10),
              child: Divider(color: Colors.black, height: 30,),
            ),
            Card(
              margin: const EdgeInsets.all(10),
              elevation:20,
              color: Colors.purple[200],
              child: const ListTile(
                title: Text("Kadriye Macit"),
                subtitle: Text("Ankara"),
                trailing: Icon(Icons.call),
              ),
            ),
          ],
        )
      ]
    ),
  )
)

你代码中的Text(“Some title text here")使用了中文引号和错误的转义符，需改成英文双引号"Some title text here"，否则会触发编译错误。

内容的提问来源于stack exchange，提问作者emsiloader