我一直在调整TabBar小部件,使TabBarView出现在TabBar之上,从那时起,我必须使用Expanded小部件来包裹DefaultTabController和TabBarView小部件,使它们在呈现的屏幕中可见。但不知何故,它在TabBarView和TabBar之间创建了一些不必要的空间。那个空间,我相信从扩展,正在推动所有可能的空间,以填补整个屏幕。我想移除或控制这个空间。我该怎么做?
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main(List<String> args) {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
darkTheme: ThemeData.dark(),
home: Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
leading: null,
title:
Padding(padding: EdgeInsets.symmetric(vertical: 20, horizontal: 20),
child: Text('Logo')),
actions:
[Padding(padding: EdgeInsets.symmetric(vertical: 0, horizontal: 20),
child: IconButton(onPressed: () {}, icon: Icon(Icons.menu),
color: Colors.white,),
)
],
),
body:
Column(
children: [
Expanded(
child: DefaultTabController(length: 3, child:
Column(
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
child: TabBarView(
children: [
Column(
children: [
Image.asset('lib/images/Truck2.png', height: 300,),
],
),
Column(
children: [
Image.asset('lib/images/Truck2.png', height: 300,),
],
),
Column(
children: [
Image.asset('lib/images/Truck2.png', height: 300,),
],
),
]
),
),
TabBar(tabs: [
Tab(
iconMargin: EdgeInsets.symmetric(vertical: 1, horizontal: 200),
child: ElevatedButton(
style: ButtonStyle(
shape: MaterialStatePropertyAll(RoundedRectangleBorder(borderRadius: BorderRadius.circular(20))),
fixedSize: MaterialStatePropertyAll(Size(100, 38)),
backgroundColor: MaterialStatePropertyAll(Colors.grey)),
onPressed: null, child: Text('Tab1', style: TextStyle(color: Colors.white) ,)),),
Tab(
iconMargin: EdgeInsets.symmetric(vertical: 1, horizontal: 200),
child: ElevatedButton(
style: ButtonStyle(
shape: MaterialStatePropertyAll(RoundedRectangleBorder(borderRadius: BorderRadius.circular(20))),
fixedSize: MaterialStatePropertyAll(Size(100, 38)),
backgroundColor: MaterialStatePropertyAll(Colors.grey)),
onPressed: null, child: Text('Tab2', style: TextStyle(color: Colors.white) ,)),),
Tab(child: ElevatedButton(
style: ButtonStyle(
shape: MaterialStatePropertyAll(RoundedRectangleBorder(borderRadius: BorderRadius.circular(20))),
fixedSize: MaterialStatePropertyAll(Size(100, 38)),
backgroundColor: MaterialStatePropertyAll(Colors.grey)),
onPressed: null, child: Text('Tab3', style: TextStyle(color: Colors.white) ,)),)
]
),
],
)
),
),
// Container(
// height: 100,
// width: 100,
// color: Colors.grey,
// ),
ElevatedButton(onPressed: () {}, child: Text('Button Bottom')),
],
) ,
)
)
;
}
}
字符串
Trying to remove the space between tabbar and image
**所有我尝试过但没有工作的事情:**调整2个展开小部件的flex属性。交换扩展为灵活部件。把Sizedbox与固定高度的每个图像。深入研究DevTool,看看我可以在任何一个小部件中调整哪些其他属性。将mainAxisSize更改为最小值。
1条答案
按热度按时间ej83mcc01#
这是否更接近你想要的?听起来您并不真的希望DefaultTabController被扩展。
字符串