Flutter 移除 tab 和 tabview 之间的部分边框答案

【问题标题】：Flutter remove partial border between tab and tabviewFlutter 移除 tab 和 tabview 之间的部分边框
【发布时间】：2020-03-21 17:57:31
【问题描述】：

如何去除选项卡与其链接的选项卡视图之间的部分边框，如下图所示。

下面是我创建标签和标签视图的代码。

Column(
  children: <Widget>[


    Row(
      children: <Widget>[
        Container(
          width: 200,
          child: TabBar(
              controller: _controller,
              labelColor: Colors.black,
              unselectedLabelColor: Colors.grey,
              indicator: BoxDecoration(

                border: Border(
                    left: BorderSide(
                        color: Colors.black,
                        width: 1.0
                    ),
                    right: BorderSide(
                        color: Colors.black,
                        width: 1.0
                    ),
                    top: BorderSide(
                        color: Colors.black,
                        width: 1.0
                    )
                ),
                color: Colors.white,
              ),

              tabs: [
                Tab(
                  child: Align(
                    alignment: Alignment.center,
                    child: Text("Apple"),
                  ),
                ),
                Tab(
                  child: Align(
                    alignment: Alignment.center,
                    child: Text("Android"),
                  ),
                )
              ]
          ),
        )
      ],
    ),

    AnimatedBuilder(
      animation: _controller.animation,
      builder: (BuildContext context, snapshot) {
        return Transform.rotate(
          angle: 0,
          child: [
            Container(
              decoration: BoxDecoration(
                border: Border.all(
                    color: Colors.black,
                    width: 1.0
                ),
                color: Colors.white,
              ),
              width: double.maxFinite,
              child: Text("At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium"),
            ),
            Container(
              decoration: BoxDecoration(
                border: Border.all(
                  color: Colors.black,
                  width: 1.0
                ),
                color: Colors.white,
              ),
              width: double.maxFinite,
              child: Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco"),
            )
          ] [_controller.animation.value.round()],
        );
      },
    )




  ],
)

下面是标签控制器的代码。

class ProductDetailState extends State<ProductDetail> with SingleTickerProviderStateMixin {
   TabController _controller;

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


}

【问题讨论】：

AppBar中是否设置了elevation=0？
我没有标签和标签视图的应用栏，我已用作列子

标签： flutter flutter-layout flutter-web

【解决方案1】：

 child: Stack(
      children: <Widget>[
        Container(
          margin: EdgeInsets.only(
            top: 49,
            left: 10.0,
            right: 10.0,
          ),
          child: AnimatedBuilder(
            animation: _controller.animation,
            builder: (BuildContext context, snapshot) {
              return Transform.rotate(
                angle: 0,
                child: [
                  Container(
                    decoration: BoxDecoration(
                      border: Border.all(color: Colors.black, width: 1.0),
                      color: Colors.white,
                    ),
                    width: double.maxFinite,
                    child: Text(
                        "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium"),
                  ),
                  Container(
                    decoration: BoxDecoration(
                      border: Border.all(color: Colors.black, width: 1.0),
                      color: Colors.white,
                    ),
                    width: double.maxFinite,
                    child: Text(
                        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco"),
                  )
                ][_controller.animation.value.round()],
              );
            },
          ),
        ),
        Row(
          children: <Widget>[
            Container(
              margin: EdgeInsets.only(
                left: 10.0,
                right: 10.0,
              ),
              width: 200,
              height: 50,
              child: TabBar(
                  controller: _controller,
                  labelColor: Colors.black,
                  unselectedLabelColor: Colors.grey,
                  indicator: BoxDecoration(
                    border: Border(
                      left: BorderSide(color: Colors.black, width: 1.0),
                      right: BorderSide(color: Colors.black, width: 1.0),
                      top: BorderSide(color: Colors.black, width: 1.0),
                    ),
                    color: Colors.white,
                  ),
                  tabs: [
                    Tab(
                      child: Align(
                        alignment: Alignment.center,
                        child: Text("Apple"),
                      ),
                    ),
                    Tab(
                      child: Align(
                        alignment: Alignment.center,
                        child: Text("Android"),
                      ),
                    )
                  ]),
            )
          ],
        ),
      ],
    ),

【讨论】：