簡體   English   中英

ModalBottomSheet 中的 tabBar 具有動態大小 Flutter

[英]tabBar in ModalBottomSheet with dynamic size Flutter

我想使用tabBar一個內modal Bottom Sheet為用戶input.But tabBarView取頁面的所有高度,如果我們不指定固定值(Eg.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),
          ),
        ),
      ),
    );
  }
}

TabBar之后使用Expanded而不是Container(height: 100, ...

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM