当我使用 ListView.builder 它显示错误

Question

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class GameQuiz extends StatefulWidget {
  const GameQuiz({Key? key}) : super(key: key);

  @override
  _GameQuizState createState() => _GameQuizState();
}

class _GameQuizState extends State<GameQuiz> {
  List options = ["option 1", "option 2", "option 3", "option 4"];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: MediaQuery.of(context).size.width,
        decoration: const BoxDecoration(
          color: Colors.deepPurple,
          image: DecorationImage(
              image: AssetImage(
                "assets/images/background.jpg",
              ),
              fit: BoxFit.cover),
        ),
        child: Padding(
          padding: const EdgeInsets.fromLTRB(20, 100, 20, 0),
          child: Column(children: [
            Text(
              "Animal Kingdom Quiz",
              style: GoogleFonts.fredokaOne(
                  color: Colors.white,
                  fontSize: 40,
                  fontWeight: FontWeight.bold),
              textAlign: TextAlign.center,
            ),
            Padding(
              padding: const EdgeInsets.fromLTRB(20, 60, 20, 20),
              child: Container(
                width: MediaQuery.of(context).size.width - 40,
                decoration:
                    BoxDecoration(color: Colors.purple.withOpacity(0.3)),
                child: Padding(
                  padding: const EdgeInsets.only(top: 30),
                  child: Column(
                    children: [
                      Text(
                        "My Question",
                        style: GoogleFonts.fredokaOne(
                            color: Colors.white,
                            fontSize: 24,
                            fontWeight: FontWeight.bold),
                      )
                      ListView.builder(
                          itemCount: options.length,
                          itemBuilder: (context , index){
                            return Text(options[index]);
                          }),
                      
                    ],
                  ),
                ),
              ),
            ),
          ]),
        ),
      ),
    );
  }
}

Answer 1

您可以在 ListView 上使用 shrinkWrap: true,。

),
ListView.builder(
  itemCount: options.length,
  shrinkWrap: true,
  itemBuilder: (context, index) {
    return Text(options[index]);
  },
),

更多关于。

Answer 2

在你的 ListView.builder 中像这样使用 'shrinkWrap: true'

class GameQuiz extends StatefulWidget {
 const GameQuiz({Key? key}) : super(key: key);

 @override
 _GameQuizState createState() => _GameQuizState();
}

class _GameQuizState extends State<GameQuiz> {
List options = ["option 1", "option 2", "option 3", "option 4"];

@override
Widget build(BuildContext context) {
 return Scaffold(
  body: Container(
    width: MediaQuery.of(context).size.width,
    decoration: const BoxDecoration(
      color: Colors.deepPurple,
      image: DecorationImage(
          image: AssetImage(
            "assets/images/background.jpg",
          ),
          fit: BoxFit.cover),
    ),
    child: Padding(
      padding: const EdgeInsets.fromLTRB(20, 100, 20, 0),
      child: Column(children: [
        Text(
          "Animal Kingdom Quiz",
          style: GoogleFonts.fredokaOne(
              color: Colors.white,
              fontSize: 40,
              fontWeight: FontWeight.bold),
          textAlign: TextAlign.center,
        ),
        Padding(
          padding: const EdgeInsets.fromLTRB(20, 60, 20, 20),
          child: Container(
            width: MediaQuery.of(context).size.width - 40,
            decoration:
                BoxDecoration(color: Colors.purple.withOpacity(0.3)),
            child: Padding(
              padding: const EdgeInsets.only(top: 30),
              child: Column(
                children: [
                  Text(
                    "My Question",
                    style: GoogleFonts.fredokaOne(
                        color: Colors.white,
                        fontSize: 24,
                        fontWeight: FontWeight.bold),
                  ),
                  ListView.builder(
                    shrinkWrap: true,
                      itemCount: options.length,
                      itemBuilder: (context , index){
                        return Text(options[index]);
                      }),
                  
                ],
              ),
            ),
          ),
        ),
      ]),
    ),
  ),
 );
}
}

当我使用 ListView.builder 它显示错误

when i use ListView.builder it show error

dart

flutter

flutter-layout