时间戳

首页 > 解决方案 > 如何在 TabBarView 小部件中使用小部件制作整页

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

问题描述

我正在尝试创建一个包含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、 s 等创建更多小部件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. 缺少什么文档没有显示？

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

在此处输入图像描述

标签： flutterdart

解决方案

我有一个代码演示如下。您的问题可能是您没有为小部件设置大小并为 and 设置tabbartabcontroller tabview。我希望它可以帮助你

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

推荐阅读