You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter中如何让ListView子项根据内容自适应高度?

让ListView子项根据内容自适应尺寸

在ListView中,通常需要指定列表项的高度,但我希望让列表项根据其子组件内容自适应高度,效果如下:

自适应高度的ListView

注意:数据将从服务器加载。

列表项代码

import 'package:flutter/material.dart';

class EditExperienceItemWidget extends StatelessWidget {
  const EditExperienceItemWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(10),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Flexible(
            flex: 2,
            child: Row(
              children: [
                Flexible(
                  flex: 1,
                  child: Container(
                    child: Text('1'),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10),
                      color: Colors.white,
                      border: Border.all(
                        color: Theme.of(context).primaryColor,
                        width: 1,
                        style: BorderStyle.solid,
                      ),
                    ),
                  ),
                ),
                Flexible(
                  flex: 3,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Flexible(
                        child: Text('UI/UX Designer'),
                        flex: 1,
                      ),
                      Flexible(
                        child: Text('Gate Way'),
                        flex: 1,
                      ),
                      Flexible(
                        child: Text('27/12/2020 - 11/4/2021'),
                        flex: 1,
                      ),
                    ],
                  ),
                ),
                Flexible(
                  flex: 1,
                  child: IconButton(
                    onPressed: () {},
                    icon: Icon(
                      Icons.edit,
                      color: Theme.of(context).primaryColor,
                      size: 22,
                    ),
                  ),
                )
              ],
            ),
          ),
          Divider(
            thickness: 1,
            indent: 30,
            endIndent: 30,
          ),
          Flexible(
            flex: 3,
            child: Text(
                'I felt really good at ZazaPay it was a very ui we did lots of stuff in a friendly place with very special people'),
          )
        ],
      ),
    );
  }
}

页面代码

import 'package:dozar/screen/edit_experience_screen/widget/edit_experience_item_widget.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class EditExperienceScreen extends StatelessWidget {
  const EditExperienceScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    return Scaffold(
      backgroundColor: Theme.of(context).backgroundColor,
      body: SafeArea(
        child: Container(
          padding: EdgeInsets.symmetric(vertical: 10, horizontal: 16),
          child: Column(
            children: [
              Row(
                children: [
                  IconButton(
                    onPressed: () {
                      Get.back();
                    },
                    icon: Icon(
                      Icons.keyboard_arrow_left,
                      color: Colors.black,
                    ),
                  ),
                  SizedBox(width: 10,),
                  Text(
                    'Edit Experiences',
                    style: Theme.of(context).textTheme.titleLarge,
                  ),
                ],
              ),
              SizedBox(
                height: 10,
              ),
              Expanded(
                child: ListView.separated(
                  itemBuilder: (context, index) {
                    return EditExperienceItemWidget();
                  },
                  separatorBuilder: (context, index) {
                    return SizedBox(
                      height: 10,
                    );
                  },
                  itemCount: 5,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

我使用了名为EditExperienceItemWidget的无状态自定义组件。


内容的提问来源于stack exchange,提问作者Muhamad Haydar Jawad

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.24 15:18:14