android - ModalBottomSheet中的tabBar具有动态大小的Flutter

标签 android ios flutter dart flutter-layout

我想在tabBar中使用modal Bottom Sheet进行用户输入。但是如果我们不指定固定值(例如tabBarView中的height),则container会占用页面的所有高度。 Modal Bottom Sheet默认的用户交互是完美的(在键盘输入过程中会弹出底部表格)。下面给出了我的代码段。您有什么办法可以恢复默认行为?

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Tester',
      home: Homepage(),
    );
  }
}
class Homepage extends StatefulWidget {
  @override
  _HomepageState createState() => _HomepageState();
}

class _HomepageState extends State<Homepage> {

Future bottomModal(BuildContext context) {
    return showModalBottomSheet(
        isScrollControlled: true,
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.vertical(top: Radius.circular(12))),
        context: context,
        builder: (context) {
          return Padding(
            padding: MediaQuery.of(context).viewInsets,
            child: DefaultTabController(
              length: 2,
              initialIndex: 0,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  TabBar(
                    labelColor: Colors.red,
                    tabs: <Widget>[
                      Tab(
                        icon: Icon(Icons.edit),
                      ),
                      Tab(
                        icon: Icon(Icons.note_add),
                      )
                    ],
                  ),
                  Container(
                    height:
                        100,     //I want to use dynamic height instead of fixed height
                    child: TabBarView(
                      children: <Widget>[
                        Column(
                          children: <Widget>[
                            TextField(
                              decoration:
                                  InputDecoration(hintText: 'Enter Task'),
                            ),
                            RaisedButton(
                              child: Text('Submit'),
                              onPressed: () {},
                            )
                          ],
                        ),
                        Column(
                          children: <Widget>[
                            TextField(
                              decoration:
                                  InputDecoration(hintText: 'Personal Note'),
                            ),
                            RaisedButton(
                              onPressed: () {},
                              child: Text('Submit'),
                            ),
                          ],
                        )
                      ],
                    ),
                  )
                ],
              ),
            ),
          );
        });
  }
@override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      floatingActionButton: FloatingActionButton(
        onPressed: () => bottomModal(context),
        child: Icon(Icons.add),
      ),
      body: Center(
        child: Container(
          child: Text(
            'data',
            style: TextStyle(fontSize: 60),
          ),
        ),
      ),
    );
  }
}

最佳答案

Expanded之后使用Container(height: 100, ...代替TabBar

关于android - ModalBottomSheet中的tabBar具有动态大小的Flutter,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59792374/

相关文章:

Android Theme drawable 不适用于 Color Drawable(错误?)

android - Xamarin 用户指南

java -//noinspection ForLoopReplaceableByForEach 是什么意思?

ios - 如何检测两个 CALayer 是否重叠?

ios - iTunes 连接中的 Beta 测试问题

android - 如何在手机上的Android中使用错误记录

ios - 缓慢的 iOS 共享扩展

flutter - 我如何在 flutter 中使用颜色数组中的随机颜色(不是单色)

flutter - 错误 : downloads_path_provider in flutter

flutter - 在flutter上检测设备是手机、平板还是电视