我们如何在Flutter中创建一个类似Below图像自定义标签?
我搜索并看到许多自定义标签,但他们中的任何一个都不喜欢这个。
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, ), ) ], );
输出如下图
kokeuurv2#
有了这本食谱,你可以建立自己的。
2条答案
按热度按时间rmbxnbpk1#
感谢@MrOrhan我用下面的代码创建了我的标签
输出如下图
kokeuurv2#
有了这本食谱,你可以建立自己的。