强制flutter的TabBarView适应其内容

gojuced7  于 2023-03-24  发布在  Flutter
关注(0)|答案(1)|浏览(159)

如何强制TabBarView采用最小高度以适应其内容?

import 'package:flutter/material.dart';

void main() {
  runApp(TabBarDemo());
}

class TabBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.directions_car)),
                Tab(icon: Icon(Icons.directions_transit)),
                Tab(icon: Icon(Icons.directions_bike)),
              ],
            ),
            title: Text('Tabs Demo'),
          ),
          body: Column(children: [
            Text('Header Widget'),
            Expanded(
              child: TabBarView(
                children: [
                  Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Icon(Icons.directions_car),
                      Icon(Icons.directions_car),
                    ],
                  ),
                  Icon(Icons.directions_transit),
                  Icon(Icons.directions_bike),
                ],
              ),
            ),
            Text('Footer Widget')
          ]),
        ),
      ),
    );
  }
}
1l5u6lss

1l5u6lss1#

使用BoxConstraint限制TabBarView的高度

Column(children: [
            Text('Header Widget'),
            Container(
              constraints: BoxConstraints(
                maxHeight: 100.0,
              ),
              child: TabBarView(
                children: [
                  Container(
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Icon(Icons.directions_car),
                        Icon(Icons.directions_car),
                      ],
                    ),
                  ),
                  Icon(Icons.directions_transit),
                  Icon(Icons.directions_bike),
                ],
              ),
            ),
            Text('Footer Widget')
          ]),

输出:

相关问题