Flutter UI：扩展小部件中的两个 ListView.builder答案

【问题标题】：Flutter UI: Two ListView.builders in Expanded WidgetFlutter UI：扩展小部件中的两个 ListView.builder
【发布时间】：2020-05-24 22:01:01
【问题描述】：

应用应兼容不同的屏幕格式。设置了纵向模式，因此不必观察横向模式。

内容排列在一个 Column () 小部件中。除 ListView.builder 之外的所有内容 - 小部件都有固定高度。

是否可以将 ListView.builder 都安排在像 Expanded 这样的小部件中，以便在可用空间上均匀扩展，并且您仍然可以在两者中额外滚动？

Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              _showQuestionTheme(),
              _showQuestion(), //ListView.builder, which should expand 
              _showAnswers(), //ListView.builder, which should expand
              _buildAnswerButton(),
              _buildGameStatusTextfields(),
              _progressBarAnswerTimeLeft(),
            ],
          ),

【问题讨论】：

标签： listview user-interface flutter dart widget

【解决方案1】：

像 listView 这样的小部件总是需要预定义的高度和宽度。您可以将 Listview 包装在容器内，然后，给容器一个动态高度：（列表中的元素）*（每个元素的高度）我希望这个技巧对你有用。

例如：

Container(
height:litems.length*20,
child:ListView.builder
  (
    itemCount: litems.length,
    itemBuilder: (BuildContext ctxt, int index) {
     return Container(height:20,
             child:Text(litems[index]));
    }
  )
)

【讨论】：

【解决方案2】：

希望这对你有用:)

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text("LIST VIEW:1",style: TextStyle(fontWeight: FontWeight.bold),),
              SizedBox(height: 20,),
             Expanded(
              //  flex: 1,
               child:Container(
                 decoration: BoxDecoration(
                   border: Border.all(color: Colors.black),
                   color: Colors.green,
                 ), 
                 height: 20,
                 child: ListView.builder(
                   itemCount: 20,
                   itemBuilder: (context, index){
                     return Card(
                       child: ListTile(
                         title: Text("Name"),
                          subtitle: Text("SubNME"),
                        ),
                      );
                    }
                  ),
                )
              ),
              SizedBox(height: 20,),
               Text("LIST VIEW:2",style: TextStyle(fontWeight: FontWeight.bold)),
              SizedBox(height: 20,),
              Expanded(
               child:Container(
                 decoration: BoxDecoration(
                   border: Border.all(color: Colors.black),
                   color: Colors.red,

                 ),

                 height: 20,
                 child: ListView.builder(
                   itemCount: 20,
                   itemBuilder: (context, index){
                     return Card(
                       child: ListTile(
                         title: Text("Title"),
                          subtitle: Text("Subtitle"),
                       ),
                     );
                    }
                  ),
                )
              )
            ],
          ),
        ),
      ),   
    );
  }
}

【讨论】：

太棒了。工作。

【解决方案3】：

对两个 ListView 都使用它：

Container(
        height: MediaQuery.of(context).size.height*0.5,
    child:YOUR_LISTVIEW
)

【讨论】：