flutter 如何删除或修复 Package DefaultTabController和TabBarView的Expanded widget所产生的额外空间?

rlcwz9us  于 2023-08-07  发布在  Flutter
关注(0)|答案(1)|浏览(108)

我一直在调整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更改为最小值。

ej83mcc0

ej83mcc01#

这是否更接近你想要的?听起来您并不真的希望DefaultTabController被扩展。

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: const 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: [
            DefaultTabController(
              length: 3,
              child: SizedBox(
                height: 350,
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Expanded(
                      child: TabBarView(children: [
                        Column(
                          children: [
                            Image.asset(
                              'assets/images/Truck2.png',
                              height: 300,
                            ),
                          ],
                        ),
                        Column(
                          children: [
                            Image.asset(
                              'assets/images/Truck2.png',
                              height: 300,
                            ),
                          ],
                        ),
                        Column(
                          children: [
                            Image.asset(
                              'assets/images/Truck2.png',
                              height: 300,
                            ),
                          ],
                        ),
                      ]),
                    ),
                    TabBar(tabs: [
                      Tab(
                        iconMargin: const 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: const 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: const 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: const Text(
                              'Tab3',
                              style: TextStyle(color: Colors.white),
                            )),
                      )
                    ]),
                  ],
                ),
              ),
            ),
            Flexible(child: Placeholder()),
            ElevatedButton(child: Text('bottom button'), onPressed: null)
          ],
        ),
      ),
    );
  }
}

字符串

相关问题