![](/img/trans.png)
[英]Flutter | Have a modalbottomsheet and wish to extract it as a widget
[英]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.