Flutter TabBarView内容被拉伸问题求助及代码排查

我是Flutter新手，学习TabBar时遇到TabBarView内容被拉伸的问题。不管是用简单的黑色容器还是图片，都会出现拉伸情况。附上相关代码，想请教如何解决这个问题，以及我的TabBar用法是否正确？注：这是我第一次使用Stack Overflow，若问题格式混乱请见谅。

我的其中一个Tab代码： #

import 'package:flutter/material.dart';

class topCharts_tab extends StatelessWidget {
  const topCharts_tab({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(left: 5, top: 10),
      child: SizedBox(
        width: 100, // 设置指定宽度
        height: 100, // 设置指定高度
        child: Container(
          color: Colors.black,
        ),
      ),
    );
  }
}

主页面代码： #

import 'dart:ffi';
import 'package:flutter/material.dart';
import 'package:practice/tabs/forYou_tab.dart';
import 'package:practice/tabs/topCharts_tab.dart';

void main() => runApp(MaterialApp(
      debugShowCheckedModeBanner: false,
      home: DefaultTabController(
        length: 5,
        child: MyApp(),
      ),
    ));

class MyApp extends StatelessWidget {
  const MyApp({Key? key});

  @override
  Widget build(BuildContext context) {
    double screenWidth = MediaQuery.of(context).size.width;

    return DefaultTabController(
      length: 5,
      child: Scaffold(
        body: Column(
          children: [
            Row(
              children: [
                SizedBox(height: screenWidth * 0.3),
                Padding(
                  padding: const EdgeInsets.only(left: 15, top: 30),
                  child: Container(
                    width: screenWidth * 0.65,
                    height: screenWidth * 0.14,
                    child: TextField(
                      textAlign: TextAlign.center,
                      decoration: InputDecoration(
                          hintText: '搜索应用 & ...',
                          hintStyle: TextStyle(fontSize: 17),
                          fillColor: Color.fromRGBO(227, 230, 238, 1.0),
                          filled: true,
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(50),
                            borderSide: BorderSide.none,
                          ),
                          prefixIcon: Padding(
                            padding: const EdgeInsets.only(left: 13),
                            child: Icon(
                              Icons.search_rounded,
                              size: screenWidth * 0.07,
                            ),
                          ),
                          suffixIcon: Padding(
                            padding: const EdgeInsets.only(right: 13),
                            child: Icon(
                              Icons.mic_rounded,
                              size: screenWidth * 0.07,
                            ),
                          )),
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(top: 27, left: 8),
                  child: IconButton(
                    onPressed: () {},
                    icon: Icon(Icons.notifications_none_rounded),
                    iconSize: screenWidth * 0.08,
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(top: 27),
                  child: IconButton(
                    onPressed: () {},
                    icon: Icon(Icons.account_circle_rounded),
                    iconSize: screenWidth * 0.1,
                  ),
                ),
              ],
            ),
            TabBar(
                labelPadding: EdgeInsets.only(left: 25, right: 25),
                tabAlignment: TabAlignment.start,
                isScrollable: true,
                tabs: [
                  Tab(icon: Text('For you')),
                  Tab(icon: Text('Top charts')),
                  Tab(icon: Text('Kids')),
                  Tab(icon: Text('Premium')),
                  Tab(icon: Text('Categories')),
                ]),
            Expanded(
                child: TabBarView(children: [
              forYou_tab(),
              topCharts_tab()
            ])),
          ],
        ),
      ),
    );
  }
}

问题解决及用法说明 #

1. 内容被拉伸的原因及解决 #

TabBarView的子组件会被强制填充整个可用空间——因为你用Expanded让TabBarView占据了Column剩余的所有高度，默认情况下子组件会被拉伸填满。

解决方法很直接，给Tab内容套一个对齐控件，让内容保持原尺寸：
修改topCharts_tab的build方法：

@override
Widget build(BuildContext context) {
  return Align(
    alignment: Alignment.topLeft, // 按需求设置对齐位置，比如左上
    child: Padding(
      padding: const EdgeInsets.only(left: 5, top: 10),
      child: SizedBox(
        width: 100,
        height: 100,
        child: Container(
          color: Colors.black,
        ),
      ),
    ),
  );
}

如果是图片，同样用Align包裹，或者给Image设置fit: BoxFit.none（若担心超出边界可搭配ClipRect）：

Align(
  alignment: Alignment.topLeft,
  child: Image.asset(
    'assets/your_image.png',
    width: 100,
    height: 100,
    fit: BoxFit.none,
  ),
)

2. TabBar用法的问题修正 #

• 冗余的DefaultTabController：你在main方法和MyApp的build里各套了一层DefaultTabController，完全没必要，删掉其中一个即可（推荐保留MyApp里的，逻辑更集中）。
• Tab数量不匹配：TabBar有5个标签，但TabBarView只放了2个组件，运行会报错，必须补全剩余3个对应的Tab组件。
• Tab的写法规范：Tab(icon: Text('xxx'))会把文字当成图标渲染，正确写法是Tab(text: 'xxx')，这样文字才是正常的Tab标题。

修正后的主页面核心代码示例：

void main() => runApp(MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyApp(),
    ));

class MyApp extends StatelessWidget {
  const MyApp({Key? key});

  @override
  Widget build(BuildContext context) {
    double screenWidth = MediaQuery.of(context).size.width;

    return DefaultTabController(
      length: 5,
      child: Scaffold(
        body: Column(
          children: [
            // 搜索栏部分代码不变
            TabBar(
                labelPadding: EdgeInsets.only(left: 25, right: 25),
                tabAlignment: TabAlignment.start,
                isScrollable: true,
                tabs: [
                  Tab(text: '为你推荐'),
                  Tab(text: '排行榜'),
                  Tab(text: '儿童'),
                  Tab(text: '付费'),
                  Tab(text: '分类'),
                ]),
            Expanded(
                child: TabBarView(children: [
              forYou_tab(),
              topCharts_tab(),
              Container(child: Text('儿童Tab内容')),
              Container(child: Text('付费Tab内容')),
              Container(child: Text('分类Tab内容')),
            ])),
          ],
        ),
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者Denuda Lots