小编Ali*_*izi的帖子

Flutter:如何制作带有边框半径的自定义下划线选项卡指示器

如何制作带有边框半径的指示器:UnderlinetabIndicator?这个装饰不喜欢有 borderRadius 的 underlineinputborder。

我试图用 ShapeDecoration(UnderlineInputBorder) 来实现它。但 shapeDecoration 的大小从选项卡小部件中计数,因此我无法拥有正确的 borderRadius topright 和 topleft。

编辑:期望 在此输入图像描述

代码: 在此输入图像描述

*不介意颜色,它只是为了调试目的。

TabBar(
                  controller: _tabController,
                  labelStyle:
                      TextStyle(fontWeight: FontWeight.w600, fontSize: 16),
                  indicatorWeight: 10.0,
                  unselectedLabelColor: Colors.black,
                  labelColor: Colors.black,
                  indicatorSize: TabBarIndicatorSize.tab,
                  indicator: UnderlineTabIndicator(
                    borderSide: BorderSide(
                      width: 5.0,
                      color: HexColor("2C7381"),
                    ),
                    insets:
                        EdgeInsets.symmetric(horizontal: 10.0, vertical: 0),
                  ),
                  tabs: [
                    Container(
                      color: Colors.amber,
                      child: Padding(
                        padding: const EdgeInsets.only(bottom: 10),
                        child: Column(
                          children: [
                            Image.asset(
                              _activeIndex == 0
                                  ? "assets/icons/dummy1.png"
                                  : "assets/icons/dummy2.png",
                              height: 20,
                            ),
                            SizedBox(
                              height: 5,
                            ),
                            Text(
                              "TAB 0", …
Run Code Online (Sandbox Code Playgroud)

mobile dart flutter

1
推荐指数
1
解决办法
767
查看次数

标签 统计

dart ×1

flutter ×1

mobile ×1