Flutter 标签栏视图因展开而拉伸内容

Question

我是 Flutter 新手，我正在学习标签栏，但我无法解决标签栏视图内容被拉伸的问题。我尝试了一个简单的黑匣子，然后我也尝试了图像，但它也被拉伸了。我该如何解决这个问题，我是否正确地使用了标签栏？

附注这是我第一次使用堆栈溢出，如果这个问题的格式很乱，我深表歉意。

这是我的标签之一：

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, // Set a specific width
        height: 100, // Set a specific height
        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: 'Search apps & ...',
                          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()
            ])),
          ],
        ),
      ),
    );
  }
}

Answer 1

在您的

topCharts_tab

课程中，您使用的是具有固定宽度和高度的

SizedBox

，这可能并不适合每种屏幕尺寸。您需要将其删除。

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

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(left: 5, top: 10),
      child: Container(
        color: Colors.black,
      ),
    );
  }
}