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

问题描述

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

My goal is to add a tab inside a colum, and add more widgets on this column.

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

But when i'm adding a tab, i'm getting an error of

这是我的示例代码

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"),
            ),
          ]),
        ),
      ],
    ),
  );
}

推荐答案

您可以为TabBarView添加高度.代码:

You can add height to your TabBarView. Code:

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"),
            ),
          ]),
        ),
      ],
    ),
  );
}

这篇关于如何在flutter的列小部件内添加标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！