![](/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.