flutter 抖动自定义标签像图像

rt4zxlrg  于 2023-05-19  发布在  Flutter
关注(0)|答案(2)|浏览(130)

我们如何在Flutter中创建一个类似Below图像自定义标签?

我搜索并看到许多自定义标签,但他们中的任何一个都不喜欢这个。

rmbxnbpk

rmbxnbpk1#

感谢@MrOrhan我用下面的代码创建了我的标签

Column(
            children: [
              Container(
                height: 50.0,
                child: ListView(
                  scrollDirection: Axis.horizontal,
                  children: [
                    Row(
                      children: [
                        InkWell(
                          onTap: () => homeProvider.setTabIndex(0),
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.end,
                            mainAxisSize: MainAxisSize.max,
                            children: [
                              Container(
                                decoration: BoxDecoration(
                                  borderRadius: const BorderRadius.only(
                                    topRight: Radius.circular(
                                      10.0,
                                    ),
                                  ),
                                  color: homeProvider.tabs[0].color,
                                ),
                                width: 100,
                                height: homeProvider.tabIndex == 0 ? 50 : 40,
                                child: Center(
                                    child: Text(
                                  homeProvider.tabs[0].title,
                                  style: const TextStyle(
                                      fontSize: 18, color: Colors.white),
                                )),
                              ),
                            ],
                          ),
                        ),
                        InkWell(
                          onTap: () => homeProvider.setTabIndex(1),
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.end,
                            mainAxisSize: MainAxisSize.max,
                            children: [
                              Container(
                                decoration: BoxDecoration(
                                  borderRadius: const BorderRadius.only(
                                    topRight: Radius.circular(
                                      10.0,
                                    ),
                                    topLeft: Radius.circular(
                                      10.0,
                                    ),
                                  ),
                                  color: homeProvider.tabs[1].color,
                                ),
                                width: 150,
                                height: homeProvider.tabIndex == 1 ? 50 : 40,
                                child: Center(
                                    child: Text(
                                  homeProvider.tabs[1].title,
                                  style: const TextStyle(
                                      fontSize: 18, color: Colors.white),
                                )),
                              ),
                            ],
                          ),
                        ),
                        InkWell(
                          onTap: () => homeProvider.setTabIndex(2),
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.end,
                            mainAxisSize: MainAxisSize.max,
                            children: [
                              Container(
                                decoration: BoxDecoration(
                                  borderRadius: const BorderRadius.only(
                                    topLeft: Radius.circular(
                                      10.0,
                                    ),
                                  ),
                                  color: homeProvider.tabs[2].color,
                                ),
                                width: 150,
                                height: homeProvider.tabIndex == 2 ? 50 : 40,
                                child: Center(
                                    child: Text(
                                  homeProvider
                                      .tabs[homeProvider.tabIndex].title,
                                  style: const TextStyle(
                                      fontSize: 18, color: Colors.white),
                                )),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
              SizedBox(
                height: 5.0,
                child: Container(
                  color: homeProvider.tabs[homeProvider.tabIndex].color,
                ),
              )
            ],
          );

输出如下图

kokeuurv

kokeuurv2#

  • 首先创建一个List,在其中指定选项卡Items,包括颜色、名称等。最好是创建一个模型,并将它们保存在一个列表中。
  • 然后生成一个Horizontal Scrollable-Listview。你将用一个InkWell Package 每个ListView,所以它们是“Tab-able”的。此外,他们必须被 Package 在一个容器,在那里你给予他们的顶部左,右一个圆形的边界和颜色,你希望
  • 然后创建一个高度为2的容器,并根据tablist-item颜色更新其颜色。
  • 如果你还想更高级一点,你可以用一个动画容器代替一个普通的列表视图项目的容器,这样你就可以在点击它的时候改变它的大小。这将需要大量的微调。

有了这本食谱,你可以建立自己的。

相关问题