代码之家 › 专栏 › 技术社区 › DolDurma

Flutter实现instagram配置文件页面

flutter

DolDurma · 技术社区 · 4 年前

在下面的代码中,我想做一个简单的 Instagram 个人资料页面,我的问题是添加标签和 TabBarView 内侧 Sliver 我得到了一些错误

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: InstagramProfile(),
    );
  }
}


class InstagramProfile extends StatefulWidget {
  @override
  _InstagramProfileState createState() => _InstagramProfileState();
}

class _InstagramProfileState extends State<InstagramProfile> with TickerProviderStateMixin {
  TabController tab;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[100],
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            backgroundColor: Colors.grey[100],
            title: Container(
              color: Colors.grey[100],
              height: 200,
              width: MediaQuery.of(context).size.width,
              child: Center(
                child: Text(
                  "Head",
                  style: TextStyle(color: Colors.black),
                ),
              ),
            ),
          ),
          SliverAppBar(
            pinned: true,
            backgroundColor: Colors.white,
            title: Container(
              color: Colors.white,
              constraints: BoxConstraints.expand(height: 50),
              child: TabBar(
                  controller: tab,
                  tabs: [
                    Tab(text: "Event"),
                    Tab(text: "History"),
                    Tab(text: "Page"),
                    Tab(text: "Group"),
                  ]),
            ),
          ),
          SliverPadding(
            padding: const EdgeInsets.all(0),
            sliver: SliverList(
              delegate: SliverChildListDelegate([
                TabBarView(
                  controller: tab,
                  children: [
                    Container(
                      child: Text("Articles Body"),
                    ),
                    Container(
                      child: Text("User Body"),
                    ),
                    Container(
                      child: Text("User Body"),
                    ),
                    Container(
                      child: Text("User Body"),
                    ),
                  ],
                ),
              ]),
            ),
          )
        ],
      ),
    );
  }
}

错误:

RenderBox was not laid out: _RenderScrollSemantics#6cf1a relayoutBoundary=up8 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1785 pos 12: 'hasSize'


'package:flutter/src/rendering/sliver_multi_box_adaptor.dart': Failed assertion: line 545 pos 12: 'child.hasSize': is not true.
The relevant error-causing widget was: 
  SliverList file:///C:/Users/mahdi/AndroidStudioProjects/social_calendar_pro/lib/tabbar.dart:57:21

0 回复 | 直到 4 年前

Shubham Narkhede 4 年前

          import 'package:flutter/material.dart';

      void main() {
        runApp(MyApp());
      }

      class MyApp extends StatelessWidget {
        @override
        Widget build(BuildContext context) {
          return MaterialApp(
            title: 'Flutter Demo',
            theme: ThemeData(
              primarySwatch: Colors.blue,
              visualDensity: VisualDensity.adaptivePlatformDensity,
            ),
            home: InstagramProfile(),
          );
        }
      }

      class InstagramProfile extends StatefulWidget {
        @override
        _InstagramProfileState createState() => _InstagramProfileState();
      }

      class _InstagramProfileState extends State<InstagramProfile>
      with TickerProviderStateMixin {
    TabController tab;

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

    @override
    Widget build(BuildContext context) {
      return Scaffold(
        backgroundColor: Colors.grey[100],
        body: CustomScrollView(
          shrinkWrap: true,
          slivers: <Widget>[
            SliverAppBar(
              backgroundColor: Colors.grey[100],
              title: Container(
                color: Colors.grey[100],
                height: 200,
                width: MediaQuery.of(context).size.width,
                child: Center(
                  child: Text(
                    "Head",
                    style: TextStyle(color: Colors.black),
            ),
          ),
        ),
      ),
      SliverAppBar(
        pinned: true,
        title: Container(
          // color: Colors.black12,
          constraints: BoxConstraints.expand(height: 50),
          child: TabBar(controller: tab, tabs: [
            Tab(text: "Event"),
            Tab(text: "History"),
            Tab(text: "Page"),
            Tab(text: "Group"),
          ]),
        ),
      ),
      SliverPadding(
        padding: const EdgeInsets.all(10),
        sliver: SliverList(
          delegate: SliverChildListDelegate([
            Container(
              child: TabBarView(
                controller: tab,
                children: [
                  Container(
                    child: Text("Articles Body"),
                  ),
                  Container(
                    child: Text("User Body"),
                  ),
                  Container(
                    child: Text("User Body"),
                  ),
                  Container(
                    child: Text("User Body"),
                  ),
                ],
              ),
              height: 600,
            )
          ]),
        ),
      )
              ],
            ),
          );
        }
      }

我希望这对你有用