如何在Flutter中实现可滚动的多跳转按钮列表视图？

Hey there! Let's get your scrollable theme button list up and running smoothly. You're already halfway there with the single button—here's how to expand it to multiple buttons and add scrolling support:

Step 1: Set up your theme destination pages #

First, create dedicated pages for each theme users can navigate to. These can be simple stateless widgets to start:

// Example Theme 1 Info Page
class Theme1Page extends StatelessWidget {
  const Theme1Page({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Theme 1 Details")),
      body: const Center(child: Text("This is the info page for Theme 1!")),
    );
  }
}

// Example Theme 2 Info Page
class Theme2Page extends StatelessWidget {
  const Theme2Page({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Theme 2 Details")),
      body: const Center(child: Text("This is the info page for Theme 2!")),
    );
  }
}

// Add as many theme pages as you need...

Step 2: Replace your single button with a scrollable ListView #

Flutter's ListView is perfect for this—it automatically handles scrolling when content exceeds the screen height. Wrap all your buttons in a ListView like this:

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Theme Selector',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Select a Theme")),
      // Use ListView to create a scrollable list of buttons
      body: ListView(
        padding: const EdgeInsets.all(16.0),
        children: [
          // Theme 1 Button
          ElevatedButton(
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => const Theme1Page()),
              );
            },
            child: const Text("Go to Theme 1 Info"),
          ),
          // Add spacing between buttons for better UI
          const SizedBox(height: 12.0),
          // Theme 2 Button
          ElevatedButton(
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => const Theme2Page()),
              );
            },
            child: const Text("Go to Theme 2 Info"),
          ),
          // Add more buttons here as needed
          const SizedBox(height: 12.0),
          ElevatedButton(
            onPressed: () {
              // Add navigation logic for your next theme page
            },
            child: const Text("Go to Theme 3 Info"),
          ),
        ],
      ),
    );
  }
}

Step 3: (Optional) Optimize for lots of themes #

If you plan to add dozens of themes, use ListView.builder to dynamically generate buttons instead of hardcoding them. This is more efficient and easier to maintain:

// First, create a list of theme data
final List<Map<String, dynamic>> themes = [
  {"name": "Theme 1", "page": const Theme1Page()},
  {"name": "Theme 2", "page": const Theme2Page()},
  {"name": "Theme 3", "page": const Theme3Page()},
  // Add more themes here
];

// Then update your HomePage body:
body: ListView.builder(
  padding: const EdgeInsets.all(16.0),
  itemCount: themes.length,
  itemBuilder: (context, index) {
    final theme = themes[index];
    return Column(
      children: [
        ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => theme["page"]),
            );
          },
          child: Text("Go to ${theme["name"]} Info"),
        ),
        // Skip spacing after the last button
        if (index != themes.length - 1) const SizedBox(height: 12.0),
      ],
    );
  },
),

Key Notes: #

• Automatic Scrolling: ListView takes care of scrolling automatically once your button list grows beyond the screen height—no extra code needed.
• Consistent Navigation: Using Navigator.push with MaterialPageRoute gives you Flutter's default page transition animation, which feels familiar to users.
• Clean UI: Adding SizedBox between buttons prevents them from looking cramped.

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