Question

import 'package:flutter/material.dart';

class TestTab extends StatelessWidget {

  final List<Tab> myTabs = <Tab>[
   Tab(
    child: Image.asset(
      'assets/icons/project/proj_001.png',
    ),
  ),
 ...
  Tab(
    icon: Image.asset(
      'assets/icons/project/all.png',
      height: 100,
    ),
  ),
 ...
  Tab(
    icon: Image.asset(
      'assets/icons/project/proj_009.png',
    ),
  ),
  ];

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      initialIndex: 5,
      length: myTabs.length,
      child: Scaffold(
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(150.0),
          child: AppBar(
          bottom: TabBar(
            isScrollable: true,
            tabs: myTabs,
          ),
        ),
        ),
        body: TabBarView(
          children: myTabs.map((Tab tab) {
            return Center(
              child: Text(
                'Test',
                style: const TextStyle(fontSize: 36),
              ),
            );
          }).toList(),
        ),
      ),
    );
  }
}

我尝试增加图标的高度，但是不起作用。好像他自己选择了所有参数。不允许减小元素的宽度或增加其高度。

Screen

请告诉我如何增加元素的高度？

Answer 1

您必须自定义TabBar进行自定义。像这样的东西。

CustomTabbar

import 'package:flutter/material.dart';

class ChangeTextSizeTabbar extends StatefulWidget {

  @override
  ChangeTextSizeTabbarState createState() {
    return new ChangeTextSizeTabbarState();
  }

}

class ChangeTextSizeTabbarState extends State<ChangeTextSizeTabbar> {

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: Text("Change Text Size Tabbar Example"),
          bottom: TabBar(

              tabs: <Tab>[
                Tab(
                  child: Image.asset(
                    'assets/icons/project/proj_001.png',
                     height : 100,
                     width : 100,
                  ),
                ),

                Tab(
                  icon: Image.asset(
                    'assets/icons/project/all.png',
                     height : 100,
                     width : 100,
                  ),
                ),

                Tab(
                  icon: Image.asset(
                    'assets/icons/project/proj_009.png',
                     height : 100,
                     width : 100,
                  ),
                ),

              ]          ),
        ),

        body: TabBarView(
          children: <Widget>[
            Container(),
            Container(),
            Container(),
          ],
        ),
      ),
    );
  }
}

main.dart

    import 'package:flutter/material.dart';
    import 'change_text_size_tabbar_task-3.dart';

    void main() => runApp(MyApp());

    class MyApp extends StatelessWidget {
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          debugShowCheckedModeBanner: false,
          theme: ThemeData(
            // This is the theme of your application.
            //
            // Try running your application with "flutter run". You'll see the
            // application has a blue toolbar. Then, without quitting the app, try
            // changing the primarySwatch below to Colors.green and then invoke
            // "hot reload" (press "r" in the console where you ran "flutter run",
            // or simply save your changes to "hot reload" in a Flutter IDE).
            // Notice that the counter didn't reset back to zero; the application
            // is not restarted.
            primarySwatch: Colors.blue,
          ),
          //home: MyHomePage(title: 'Flutter Demo Home Page'),
          home: ChangeTextSizeTabbar(),
        );
      }
    }

Answer 2

如果您希望将图标尺寸设置得较小，则可以这样做

         Tab(
              text: "Category List",
              icon: Icon(Icons.home,size: 15,),
            ),
            Tab(
              text: "Product List",
              icon: Icon(Icons.view_list,size: 15,),
            ),
            Tab(
              text: "Contact Us",
              icon: Icon(Icons.contacts,size: 15,),
            ),
            Tab(
              text: "Darshan Timing",
              icon: Icon(Icons.access_time,size: 15,),
            )

这里size: 15,将根据需要调整图标大小

Flutter TabBar高度图标

2 个答案: