showmodalbottomsheet with listView.builder不起作用的动态高度

Question

我正在尝试根据内容大小创建底部表格，但不起作用。在表格中，我使用了以下小部件容器 - ＆gt; column-＆gt; listView Builder。

我尝试了以下选项，但仍未做出任何例外。

isScrollControlled: true, 

listView属性：缩水：true，，并使用 wrap 窗口小部件检查也无法正常工作。

Wrap 没有 listView 的小部件正在工作。

请找到代码：

class BottomStringlistController {
  var selectedValue = "";
  void showSheet(BuildContext context, List<String> values, String currentTitle, {required Function(String value) onCompletion}){
    var bottomSheet = showModalBottomSheet<void>(
      // isScrollControlled: true,
      backgroundColor: Colors.transparent,
      context: context,
      builder: (BuildContext context) {
        return
          Container(
          decoration: const BoxDecoration(
            color: Colors.white,
            borderRadius:  BorderRadius.all(
              Radius.circular(15.0),
            ),
          ),
          child:
          Padding(
            padding: const EdgeInsets.all(15.0),
            child:
            SingleChildScrollView(
              child:  Expanded(
                child:  Column(
                  children: [
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Text(
                          currentTitle.toUpperCase(),
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            fontSize: getProportionateScreenWidth(14),
                            fontWeight: FontWeight.bold,
                            color: kPrimaryColor,
                          ),
                        ),
                        const Spacer(),
                        IconButton(onPressed:(){
                          Navigator.pop(context);
                        },
                          icon: const Icon(Icons.close,color: kPrimaryColor,),
                        ),
                      ],
                    ),
                    const Divider(color: kPrimaryColor,),
                    SizedBox(height: getProportionateScreenWidth(15),),
                    ListView.builder(
                      shrinkWrap: true,
                      itemCount: values.length,
                      itemBuilder: (context, index){
                        return GestureDetector(
                          onTap: (){
                            selectedValue = values[index];
                            Navigator.pop(context);
                          },
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(values[index].toUpperCase(),
                                textAlign: TextAlign.start,
                                style: TextStyle(
                                    fontSize: getProportionateScreenWidth(12),
                                    fontWeight: FontWeight.normal,
                                    color: Colors.black
                                ),
                              ),
                              const SizedBox(height: 10),
                            ],
                          ),
                        );
                      },
                    ),
                  ],
                ),
              ),
            ),
          ),
        );
      },
    ).whenComplete(() {
      onCompletion(selectedValue);
    });
  }
}

ss附件：

我正在学习flutter and Noob。

我的要求如下：

假设我的 sheet 必须根据内容调整大小。如果超过10，则表必须显示默认尺寸带有滚动以剩余数据...我希望您能得到我的问题

Answer 1

此示例将帮助您根据项目大小构建ShowModalBottomSheet，用ListView.seprated包装。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {  
@override   Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );   } }

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

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

class _MyHomePageState extends State<MyHomePage> {   
List<String> l = ["Monday", "Tuesday", "Wednesday", "Thursday"];   
@override   Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {
         showModalBottomSheet(
          context: context,
          isScrollControlled: false,
          backgroundColor: Colors.transparent,
          builder: (context) {
            return Container(
              child: DraggableScrollableSheet(
                builder: (_, controller) {
                  return Container(
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.only(
                        topLeft: const Radius.circular(25.0),
                        topRight: const Radius.circular(25.0),
                      ),
                    ),
                    child: ListView.builder(
                      controller: controller,
                      itemCount: l.length,
                      itemBuilder: (_, index) {
                        return ListTile(
                          title: Text(l[index]),
                        );
                      },
                    ),
                  );
                },
              ),
            );
          },
        );
        },
      ),
    );   } }

Answer 2

更新的答案

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: Scaffold(body: JustBanner())));
}

class JustBanner extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _JustBannerState();
  }
}

class _JustBannerState extends State<JustBanner> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body:
        InkWell(
          onTap: () {
            BottomStringlistController().showSheet(
                context,
                [
                  "test",
                  "test",
                  "test",
                  "test",
                  "test",
                  "test\n\n\n\n\n\n\n\n",
                  "test\n\n\n\n\n\n\n\n",
                  "test\n\n\n\n\n\n\n\n",
                  "tes",
                  "tes",
                  "tes",
                  "tes",
                  "tes",
                  "tes",
                ],
                "Testtttt");
          },
          child: Text("Click"),
        ),
      ),
    );
  }
}

class BottomStringlistController {
  var selectedValue = "";

  void showSheet(BuildContext context, List<String> values, String currentTitle,
      {Function(String value) onCompletion}) {
     showModalBottomSheet<void>(
      backgroundColor: Colors.transparent,
      context: context,
      builder: (BuildContext context) {
        return Container(
          decoration: const BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.all(
              Radius.circular(15.0),
            ),
          ),
          child: Padding(
            padding: const EdgeInsets.all(15.0),
            child: Column(
              children: [
                Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Text(
                      currentTitle.toUpperCase(),
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    const Spacer(),
                    IconButton(
                      onPressed: () {
                        Navigator.pop(context);
                      },
                      icon: const Icon(Icons.close),
                    ),
                  ],
                ),
                Expanded(
                  child: ListView.builder(
                    shrinkWrap: true,
                    physics: ScrollPhysics(),
                    itemCount: values.length,
                    itemBuilder: (context, index) {
                      return GestureDetector(
                        onTap: () {
                          selectedValue = values[index];
                          Navigator.pop(context);
                        },
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              values[index].toUpperCase(),
                              textAlign: TextAlign.start,
                              style: TextStyle(
                                  fontWeight: FontWeight.normal,
                                  color: Colors.black),
                            ),
                            const SizedBox(height: 10),
                          ],
                        ),
                      );
                    },
                  ),
                ),
              ],
            ),
          ),
        );
      },
    ).whenComplete(() {
      onCompletion(selectedValue);
    });
  }
}