首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Flutter:如何在ModalBottomSheet中减小CupertinoPicker的大小?

Flutter:如何在ModalBottomSheet中减小CupertinoPicker的大小?
EN

Stack Overflow用户
提问于 2020-01-10 00:42:39
回答 1查看 1.3K关注 0票数 1

每当我试图在ModalBottomSheetColumnRowContainer中设置一个CupertinoPicker时,它似乎占据了最大可能的位置。

有没有办法将ModalBottomSheet的大小/高度限制为CupertinoPicker的实际大小,这显然比ModalBottomSheet的高度小得多(通过其灰色背景颜色变得明显)。

下面是我的代码:

代码语言:javascript
复制
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

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

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


class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(body:
    Center(child: RaisedButton(onPressed: () => showPicker(context),
        child: Text('Show Bottom Sheet')),)
    );
  }


  Widget showPicker(BuildContext context) {
    showModalBottomSheet(
        context: context,
        builder: (context) {
              return Container(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    Text('This is a picker'),
                    Expanded(
                      child: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          Expanded(
                            child: Container(
                              height: 100,
                              child: CupertinoPicker(
                                itemExtent: 30,
                                onSelectedItemChanged: (int index) {
                                  print(index);
                                },
                                children: <Widget>[
                                  Center(child: Text("Item 1")),
                                  Center(child: Text("Item 2")),
                                  Center(child: Text("Item 3")),
                                ],
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              );

        });
  }

}

这是我得到的:

感谢您的任何提示,提示和建议!

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-01-10 01:21:29

代码语言:javascript
复制
  Widget showPicker(BuildContext context) {
    showModalBottomSheet(
        context: context,
        builder: (context) {
              return Container(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    Text('This is a picker'),
                    Row(
                      mainAxisSize: MainAxisSize.min,
                      children: <Widget>[
                        Expanded(
                          child: Container(
                            height: 100,
                            child: CupertinoPicker(
                              itemExtent: 30,
                              onSelectedItemChanged: (int index) {
                                print(index);
                              },
                              children: <Widget>[
                                Center(child: Text("Item 1")),
                                Center(child: Text("Item 2")),
                                Center(child: Text("Item 3")),
                              ],
                            ),
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              );

        });
  }

这样可以解决粘贴问题的方法,你会得到你想要的输出

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/59668567

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档