Flutter 行中的 Widget 太大导致水平溢出

Question

我无法弄清楚如何将小部件排成一行，以免它们溢出。我有一个列，其中包含一行，占据了除底部卡片之外的所有空间。在行中，左侧有一个列表视图，右侧有一个固定大小的小部件。这会导致水平溢出。我尝试用

SingleChildScrollView

包裹行，但这没有帮助。这是我的代码片段。

  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: ' Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
 getCard(int level){
    double indentation=5.0*level;
    return Padding(
      padding: EdgeInsets.only(left: indentation),
      child: Card(
        color: const Color(0xFFF5F5F5),
        child: ListTile(
          title: Text('List Item ${level + 1}'), //  title
          subtitle: Text('Description for List Item ${level + 1}'), //   subtitle
          dense: true,
        ),
      ),
    );
  }
  getListView(){
    return ListView.builder(
      itemCount: 25, // Number of items in the list
      itemBuilder: (context, index) {
        return GestureDetector(
          onTap:(){
            setState(() {
             });
          },
          child: getCard(index),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
         child: Column(
           children: [
           Expanded(
             child: ListView(
               shrinkWrap: true,
               scrollDirection: Axis.horizontal,
               children: [
                getListView(),
                const SizedBox(width:2000,
                  child: Text("A widget with a large size width"),
                ),
               ],
             ),
           ),
           const Text("this needs to be at the bottom of the screen"),
          ],
        ),
      ),
     );
  }
}

Answer 1

您的代码存在几个问题。

ListView.builder 不能与无限制的宽度或高度一起使用。您需要为 ListView.builder 定义明确的高度。

    getListView() {
        return Container(
         height: 200,
         width: 320
        child: ListView.builder(
          itemCount: 25, // Number of items in the list
          scrollDirection: Axis.vertical,
          itemBuilder: (context, index) {
            return GestureDetector(
              onTap: () {
                setState(() {});
              },
              child: getCard(index),
            );
          },
        );
       )
      }