求助:flutter Column 高度自适应问题?

作者站长头像
站长
· 阅读数 17

在Column中通过设置mainAxisSize: MainAxisSize.min可以使Column自适应子节点的高度,例如:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: Container(
            color: Colors.red,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: const [
                Text('text'),
              ],
            )),
      ),
    );
  }
}

效果图:

求助:flutter Column 高度自适应问题?

但是如果放在TabBarView下面的话,就没用了,会填满整个屏幕,示例代码:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: DefaultTabController(
          length: 2,
          child: Scaffold(
            appBar: PreferredSize(
                preferredSize: const Size.fromHeight(56),
                child: AppBar(
                  bottom: TabBar(
                    tabs: [
                      Tab(
                        text: "tab1",
                      ),
                      Tab(
                        text: "tab2",
                      ),
                    ],
                  ),
                )),
            body: TabBarView(
              children: [
                Container(
                    color: Colors.red,
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: const [
                        Text('text'),
                      ],
                    )),
                Container(
                  color: Colors.blue,
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: const [
                      Text('text'),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

效果图:

求助:flutter Column 高度自适应问题?

这种情况下要怎么才能让Column的高度自适应呢?

回复
1个回答
avatar
test
2024-07-16

TabbarView下的widget默认会包一曾Expanded, 所以你的Container的确是占满屏幕的,可是Column不影响吧?Column下的MainAxisSize.min还是会生效的。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容