Flutter ListView项改为垂直布局求助：行转列布局

Hey there! I see you're new to Flutter and want to switch your ListView items from a horizontal Row to a vertical Column with centered content. Let's adjust your code to make that happen.

First, here's the modified code that implements the layout you want:

@override
Widget build(BuildContext context) {
  String getID = widget.itemHolder.toString();
  
  return FutureBuilder<List<Flowerdata>>(
    future: fetchFlowers(),
    // Note: It's better to assign fetchFlowers() to a variable in initState to avoid re-calling on every build
    builder: (context, snapshot) {
      if (!snapshot.hasData) {
        return const Center(child: CircularProgressIndicator());
      }
      
      return ListView(
        children: snapshot.data!.map((data) => Column(
          children: <Widget>[
            GestureDetector(
              onTap: () => getItemAndNavigate(data.id, context),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  // Centered image with rounded corners
                  Container(
                    width: 100,
                    height: 100,
                    margin: const EdgeInsets.fromLTRB(10, 10, 10, 0),
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(8.0),
                      child: Image.network(
                        data.ImageURL,
                        width: 200,
                        height: 100,
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                  // Spacing between image and first text
                  const SizedBox(height: 8),
                  // Centered name text
                  Text(
                    data.Name,
                    style: const TextStyle(fontSize: 18),
                  ),
                  // Spacing between texts
                  const SizedBox(height: 4),
                  // Centered send-from text
                  Text(
                    data.SendFrom,
                    style: const TextStyle(fontSize: 18),
                  ),
                  // Spacing before FAB (adjust as needed)
                  const SizedBox(height: 12),
                  // FloatingActionButton - moved inside the Column
                  FloatingActionButton(
                    onPressed: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => AddComments(
                            UserPostID: UserPostID,
                            psoid: psoid.toString(),
                          ),
                        ),
                      );
                    },
                    child: const Icon(Icons.add),
                  ),
                  // Spacing before divider
                  const SizedBox(height: 10),
                ],
              ),
            ),
            const Divider(color: Colors.black),
          ],
        )).toList(),
      );
    },
  );
}

Key Changes Explained: #

• Replaced Row with Column: The main container inside GestureDetector is now a Column, which stacks elements vertically instead of horizontally.
• Centered Alignment: Added mainAxisAlignment: MainAxisAlignment.center (vertical centering) and crossAxisAlignment: CrossAxisAlignment.center (horizontal centering) to ensure all content is centered in the item.
• Spacing Between Elements: Used SizedBox widgets to add consistent spacing between the image, texts, and FAB—this makes the layout look cleaner.
• Adjusted Margins: Updated the image container's top margin to add space from the top of the list item.
• FAB Placement: Moved the FloatingActionButton into the Column so it's part of the vertical flow of each list item. If you wanted it to be positioned outside the main content (like in a corner), you could wrap the Column in a Stack instead, but this fits your request of vertical layout.

One quick tip: To avoid unnecessary calls to fetchFlowers() every time the widget rebuilds, assign the future to a variable in your initState() method instead of calling it directly in the FutureBuilder. This will make your app more efficient!

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