Flutter TabBar高度图标

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(),
        ),
      ),
    );
  }
}

我试着增加图标的高度，但是没有用。仿佛他自己选择了所有的参数。不允许减少元素的宽度或增加元素的高度。

画面

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

Answer 1

你必须制作自定义的TabBar。就像这样。

自定义Tabbar

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(),
          ],
        ),
      ),
    );
  }
}

主飞镖

    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(),
        );
      }
    }