如何在 Flutter 中的可滚动列表下方创建粘性文本？

Question

我试图在 Flutter 中的列表下方直接显示文本，因此对于列表中的一些项目，列表和文本之间没有空格。对于许多项目，文本应在屏幕底部保持可见。

我能够使用 React + Tailwind 实现这一目标：https://codepen.io/mluttmann/pen/RwXNOPz

在 Flutter 中，我得到了类似的东西，但是由于

Expanded

小部件，当列表中的项目很少时，文本会粘在屏幕底部。如果我删除

Expanded

小部件并将

shrinkWrap: true

添加到

ListView

构建器，则很少的项目一切都很好，但很多项目会溢出。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: ItemListScreen(),
    );
  }
}

class ItemListScreen extends StatelessWidget {
  const ItemListScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('App'),
      ),
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
              itemCount: 30,
              itemBuilder: (BuildContext context, int index) {
                return ListTile(title: Text('Item $index'));
              },
            ),
          ),
          const Text('This is some text below the list.'),
        ],
      ),
    );
  }
}

Answer 1

使用 Flexible 而不是 Expanded Widget，如下所示

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: ItemListScreen(),
    );
  }
}

class ItemListScreen extends StatelessWidget {
  const ItemListScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('App'),
      ),
      body: Column(
        mainAxisSize: MainAxisSize.min, 
        children: [
          NewWidget(),
          const Text('This is some text below the list.'),
        ],
      ),
    );
  }
}

class NewWidget extends StatelessWidget {
  const NewWidget({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Flexible(
      child: ListView.builder(
          shrinkWrap: true,
          itemCount: 30,
          itemBuilder: (BuildContext context, int index) {
            return ListTile(title: Text('Item $index'));
          },
        ),
    );
  }
}