Question

我正在尝试创建一个包含AppBar下的标签的应用。

appBar: AppBar(
  bottom: TabBar(
    labelColor: Color(0xFF1778f2),
    unselectedLabelColor: Colors.black87,
    indicatorColor: Color(0xFF1778f2),
    tabs: <Widget>[
      Tab(icon: Icon(Icons.home)),
    ],
  ),
),

哪个工作。但是问题仍然存在于在TabBarView中创建其内容时。该文档显示了一个示例，该示例显示了每个选项卡的简单Icon，仅此而已。我正在尝试使用Image，TextField，Column等创建更多的小部件。但是事情并不像文档所表达的那样简单。

这是我的HomeScreen，放在TabBarView的顶部：

body: TabBarView(
  children: <Widget>[
    HomeScreen(),
  ,
),

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          Row(
            children: <Widget>[
              CircleAvatar(),
              TextField(),
            ],
          );
        ],
      ),
    );
  }
}

然后出现类似

的错误

未布置RRenderBox：_RenderDecoration＃f0d71 relayoutBoundary = up6 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE'package：flutter / src / rendering / box.dart'：

断言失败：行1687位置12：'hasSize'

很多，都指向我的HomeScreen。该文档没有显示哪些缺失之处？

包含许多错误的屏幕截图。

Answer 1

我有如下代码演示。您的问题可能是您没有为小部件设置大小，也没有为tabbar和tabview设置tabcontroller。我希望它可以为您提供帮助

class TabBarDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return TabBarDemoState();
  }
}

class TabBarDemoState extends State<TabBarDemo> with TickerProviderStateMixin {
  TabController _controller; ///<-- fixed here

  @override
  void initState() {
    super.initState();
    _controller = TabController(length: 1, vsync: this);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        bottom: TabBar(
          controller: _controller, ///<-- fixed here
          labelColor: Color(0xFF1778f2),
          unselectedLabelColor: Colors.black87,
          indicatorColor: Color(0xFF1778f2),
          tabs: <Widget>[
            Tab(icon: Icon(Icons.home)),
          ],
        ),
        title: Text('Tabs Demo'),
      ),
      body: TabBarView(
        controller: _controller,
        children: [
          HomeScreen(),
        ],
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Size screenSize = MediaQuery.of(context).size;
    return Container(
      height: screenSize.height, // <--fixed here
      width: screenSize.width, // <--fixed here
      child: ListView(
        children: <Widget>[
          Row(
            children: <Widget>[
              CircleAvatar(),
              Container( // <--fixed here
                width: screenSize.width / 2, // <--fixed here
                child: TextField(),
              ),// <--fixed here
            ],
          ),
        ],
      ),
    );
  }
}

Answer 2

很简单。您可以使用TabBarView中的任何窗口小部件。但是要根据Tab的更改来更改页面，您必须使用TabBarController或用DefaultTabBarController包装。

这是一个DefaultTabBarController的基本清洁器示例：

import 'package:flutter/material.dart';

class SimpleTabBar extends StatefulWidget {
  @override
  _SimpleTabBarState createState() => _SimpleTabBarState();
}

class _SimpleTabBarState extends State<SimpleTabBar> {
  List<Widget> tabs;

  @override
  void initState() {
    tabs = [
      buildTab("Dart", Icons.favorite),
      buildTab("Flutter", Icons.thumb_up)
    ];
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      initialIndex: 0,
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          title: Text("Title"),
          bottom: buildTabBar(context),
        ),
        body: TabBarView(
          children: <Widget>[
            buildTabView(Colors.redAccent),
            buildTabView(Colors.greenAccent)
          ],
        ),
      ),
    );
  }

  Container buildTabView(Color color) {
    return Container(
      color: color,
      child: Column(
        children: List.generate(20, (index) => Text("$index")),
      ),
    );
  }

  Widget buildTab(String title, IconData icon) =>
      Column(children: <Widget>[Icon(icon), Text(title)]);

  TabBar buildTabBar(BuildContext context) => TabBar(tabs: tabs);
}

屏幕截图：

Answer 3

检查在TabBarView中如何管理行和列，问题出在您定义的TextField。

class NetworkDiagnosis extends StatefulWidget {
  @override
  _NetworkDiagnosisState createState() => _NetworkDiagnosisState();
}

class _NetworkDiagnosisState extends State<NetworkDiagnosis> {
  @override
  Widget build(BuildContext context) {
    return  DefaultTabController(
      length: 3,
      child:  Scaffold(
        appBar:  AppBar(
          title:  Text("Tabs"),
          bottom:  TabBar(
            tabs: <Widget>[
              Tab(text: 'One'),
              Tab(text: 'Two'),
              Tab(text: 'Three'),
            ],
          ),
        ),
        body:  TabBarView(
          children: <Widget>[
            Center(child:  HomeScreen()),
            Center(child:  Text('Two')),
            Center(child:  Text('Three')),
          ],
        ),
      ),
    );
  }
}


class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          Text('One'),
          Text('Two'),
          Row(
            children: <Widget>[
             Container(
               width: 300,
               height: 100,
               child:  TextField(
                 // controller: new TextEditingController(text: 'Enter data'),
                 keyboardType: TextInputType.text,
                 decoration: InputDecoration(
                     border: InputBorder.none,
                     hintText: "Enter Password",
                     hintStyle: TextStyle(fontSize: 16.0)),
               ),
             )

            ],
          )
        ],
      ),
    );
  }
}

Answer 4

问题是TextField()。它需要包裹在Expanded()周围。解决了。

如何在TabBarView小部件中使用小部件制作整页

4 个答案: