Flutter：如何将 TextButton 放置在 Listview 构建器的末尾，而不是将其锚定在列底部？

Question

class _AppointmentListViewState extends State<AppointmentListView> {
  int numOfInitialAppointmentsLoaded = 2;
  int numOfAppointmentsToFetch = 2;

  @override
  Widget build(BuildContext context) {
    List appointmentData = [
      ...widget.appointmentList.map(
          (appointmentData) => AppointmentModal(appointment: appointmentData))
    ];

    int totalNumberOfAppointments = appointmentData.length;

    void loadMoreAppointments() {
      if (numOfInitialAppointmentsLoaded >= totalNumberOfAppointments) {
        // may need to add a msg to the user
      } else {
        setState(() {
          if (totalNumberOfAppointments - numOfInitialAppointmentsLoaded <
              numOfAppointmentsToFetch) {
            numOfInitialAppointmentsLoaded +=
                totalNumberOfAppointments - numOfInitialAppointmentsLoaded;
          } else {
            numOfInitialAppointmentsLoaded += numOfAppointmentsToFetch;
          }
        });
      }
    }

    return Column(
      children: [
        SizedBox(
          height: MediaQuery.of(context).size.height / 1.5,
          child: ListView.builder(
              // shrinkWrap: true,
              itemCount: numOfInitialAppointmentsLoaded,
              itemBuilder: (BuildContext context, int index) {
                return appointmentData[index];
              }),
        ),
        TextButton(
            style: TextButton.styleFrom(
              foregroundColor: cocoGypsy,
              textStyle:
                  const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
            onPressed: loadMoreAppointments,
            child: const Text("See more appointments"))
      ],
    );
  }
}

目前我有一个约会列表和一个加载更多约会的文本按钮。该列表由 Listview 构建器生成，并且该按钮始终位于屏幕底部。如何使按钮随列表项动态移动，以便在加载更多项目时将其按下？

我尝试删除调整大小的框，只将列表视图和按钮小部件包装在一列中，但后来我的约会根本没有加载。

Answer 1

你可以试试这个

return Scaffold(
      body: ListView.builder(
        // shrinkWrap: true,
        itemCount: numOfInitialAppointmentsLoaded + 1,
        itemBuilder: (BuildContext context, int index) {
          if (index == numOfInitialAppointmentsLoaded)
            return TextButton(
              style: TextButton.styleFrom(
                foregroundColor: cocoGypsy,
                textStyle:
                    const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
              ),
              onPressed: loadMoreAppointments,
              child: const Text("See more appointments"),
            );
          return appointmentData[index];
        },
      ),
    );

或者你可以尝试像这样的底部导航栏

 return Scaffold(
      body: ListView.builder(
          // shrinkWrap: true,
          itemCount: numOfInitialAppointmentsLoaded,
          itemBuilder: (BuildContext context, int index) {
            return appointmentData[index];
          }),
      bottomNavigationBar: TextButton(
        style: TextButton.styleFrom(
          foregroundColor: cocoGypsy,
          textStyle: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
        ),
        onPressed: loadMoreAppointments,
        child: const Text("See more appointments"),
      ),
    );

Answer 2

给你。您可以复制此源代码并将其粘贴到

main.dart

文件中并运行它。不要忘记查看源代码下面附加的输出。

import "package:flutter/material.dart";

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(useMaterial3: true),
      home: const MainScreen(),
      debugShowCheckedModeBanner: false,
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              ListView.builder(
                itemCount: 5, // try 15 here
                shrinkWrap: true,
                physics: const ScrollPhysics(),
                itemBuilder: (BuildContext context, int index) {
                  return Card(child: ListTile(title: Text("Index $index")));
                },
              ),
              ElevatedButton(
                onPressed: () {},
                child: const Text("Button"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

输出：

Answer 3

使用CustomScrollView是不是很容易解决？

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(useMaterial3: true),
      home: const IndexScreen(),
      debugShowCheckedModeBanner: false,
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: CustomScrollView(
          slivers: [
            SliverList.builder(
              itemBuilder: (cxt, index) {
                return Card(child: ListTile(title: Text("Index $index")));
              },
              itemCount: 15,
            ),
            SliverToBoxAdapter(
              child: ElevatedButton(
                onPressed: () {},
                child: const Text("Button"),
              ),
            )
          ],
        ),
      ),
    );
  }
}