我从网上找到了一些不同的appbar设计代码并将其应用在我的代码中。我想在我的应用程序中使用bottomnavigationbar和tabbar。但是当我尝试将它们一起使用时,bottomenavigationbar部分会无限制地溢出底部像素。为了使tabbarview滚动,我也附加了expanded和singlechildscrollview,但是没有改变任何东西。
我是Dart和Flutter的新手。
请给我一个提示来解决这个问题。
Home.dart
class Home extends StatelessWidget {
GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();
@override
Widget build(BuildContext context) {
return Scaffold(
key: _scaffoldKey,
body: Column(
children: <Widget>[
Container(
height: 160.0,
child: Stack(
children: <Widget>[
Container(
color: Colors.pinkAccent[400],
width: MediaQuery.of(context).size.width,
height: 100.0,
child: Center(
child: Text(
"여행 앱 로고",
style: TextStyle(color: Colors.white, fontSize: 18.0),
),
),
),
Positioned(
top: 80.0,
left: 0.0,
right: 0.0,
child: Container(
padding: EdgeInsets.symmetric(horizontal: 20.0),
child: DecoratedBox(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(1.0),
border: Border.all(
color: Colors.grey.withOpacity(0.5), width: 1.0),
color: Colors.white),
child: Row(
children: [
IconButton(
icon: Icon(
Icons.menu,
color: Colors.pinkAccent[400],
),
onPressed: () {
print("your menu action here");
_scaffoldKey.currentState.openDrawer();
},
),
Expanded(
child: TextField(
decoration: InputDecoration.collapsed(
hintText: "검색",
),
),
),
IconButton(
icon: Icon(
Icons.search,
color: Colors.pinkAccent[400],
),
onPressed: () {
print("your menu action here");
},
),
],
),
),
),
)
],
),
),
Container(
child: TabBarHome(),
),
],
),
);
}
}
TabBarHome.dart
class TabBarHome extends StatefulWidget {
@override
_TabBarHomeState createState() => _TabBarHomeState();
}
class _TabBarHomeState extends State<TabBarHome> with
SingleTickerProviderStateMixin {
TabController _tabController;
@override
void initState() {
super.initState();
_tabController = TabController(length: 3, vsync: this);
}
@override
void dispose() {
super.dispose();
_tabController.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: <Widget>[
Expanded(
child: SingleChildScrollView(
child: TabBarView(
controller: _tabController,
children: <Widget>[
Text('회원가입'),
Text('마이페이지'),
Text('공지'),
],
),
),
),
],
),
bottomNavigationBar: Container(
child: TabBar(
controller: _tabController,
labelColor: Colors.black45,
tabs: <Widget>[
Tab(icon: Icon(Icons.person), text: '회원가입'),
Tab(icon: Icon(Icons.assignment_ind), text: '마이페이지'),
Tab(icon: Icon(Icons.list), text: '공지'),
],
),
color: Colors.cyanAccent[100],
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
floatingActionButton: FloatingActionButton.extended(
onPressed: () { },
tooltip: '해외 명소',
icon: Icon(Icons.location_on),
label: Text("해외"),
backgroundColor: Colors.orange[600],
elevation: 10.0,
),
);
}
}
我希望能够在每个选项卡视图页面上滚动而不出错。谢谢。