Question

我的目标是在列中添加一个标签，并在此列上添加更多小部件。

但是当我添加一个标签时，出现了

错误

水平视口的高度不受限制。视口在横轴上扩展以填充其容器并将其子对象限制为在横轴上匹配其范围。在这种情况下，水平视口被赋予了可无限扩展的垂直空间。任何建议，我在做什么错？谢谢！

这是我的示例代码

import 'package:flutter/material.dart';
import 'package:trip_finder/screens/home_screen.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: 'Trip Finder',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: Color(0xFF131415),
        primaryColorLight: Color(0xFF8296ab),
        highlightColor: Color(0xFF47bee1),
        scaffoldBackgroundColor: Color(0xFFf0f1f1)
      ),
//      home: HomeScreen(),
      home: TestScreen(),
    );
  }
}

class TestScreen extends StatefulWidget {
  @override
  _TestScreenState createState() => _TestScreenState();
}

class _TestScreenState extends State<TestScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child:  Column(
          children: <Widget>[
            _tabSection(),
          ],
        ),
      )
    );
  }
}

Widget _tabSection() {
  return DefaultTabController(
    length: 3,
    child: Column(
      mainAxisSize: MainAxisSize.min,

      children: <Widget>[
        Container(
          child: TabBar(tabs: [
            Tab(text: "Home"),
            Tab(text: "Articles"),
            Tab(text: "User"),
          ]),
        ),
        Container(
          child: TabBarView(children: [
            Container(
              child: Text("Home Body"),
            ),
            Container(
              child: Text("Articles Body"),
            ),
            Container(
              child: Text("User Body"),
            ),
          ]),
        ),
      ],
    ),
  );
}

Answer 1

您可以为TabBarView添加高度。代码：

import 'package:flutter/material.dart';

class TestScreen extends StatefulWidget {
  @override
  _TestScreenState createState() => _TestScreenState();
}

class _TestScreenState extends State<TestScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SingleChildScrollView(
      child: Column(
        children: <Widget>[
          _tabSection(context),
        ],
      ),
    ));
  }
}

Widget _tabSection(BuildContext context) {
  return DefaultTabController(
    length: 3,
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Container(
          child: TabBar(tabs: [
            Tab(text: "Home"),
            Tab(text: "Articles"),
            Tab(text: "User"),
          ]),
        ),
        Container( 
          //Add this to give height
          height: MediaQuery.of(context).size.height,
          child: TabBarView(children: [
            Container(
              child: Text("Home Body"),
            ),
            Container(
              child: Text("Articles Body"),
            ),
            Container(
              child: Text("User Body"),
            ),
          ]),
        ),
      ],
    ),
  );
}

Answer 2

您也可以包裹在 Flexible 内。

Flexible(
    child: Container(
        child: TabBarView(
            children: [
                Container(
                    child: Text("Home Body"),
                ),
                Container(
                    child: Text("Articles Body"),
                ),
                Container(
                    child: Text("User Body"),
                ),
            ],
        ),
    ),
)

如何在flutter的列小部件内添加标签

2 个答案: