英文:
Flutter custom tabs like image
问题
如何在Flutter中创建一个自定义选项卡，类似下面的图片？我搜索了很多自定义选项卡，但没有一个像这样的。
英文:
how can we create a custom tab like bellow image in Flutter ?
I searched and saw many custom tabs but any of them did not like this.
答案1
得分: 1
- 首先，创建一个列表，其中您将指定选项卡项目的颜色、名称等信息。最好创建一个模型来存储它们并将它们放入列表中。
- 然后，生成一个水平可滚动的列表视图（Horizontal Scrollable-Listview）。您需要将每个ListView包装在一个InkWell内，以便它们可以被点击为“可选卡”。此外，它们必须被包装在一个容器内，在容器的顶部左右分别加上圆角边框和您希望的颜色。
- 然后创建一个高度为2的容器，并根据选项卡列表项的颜色更新其颜色。
- 如果您想更高级一些，可以使用动画容器（Animated Container）代替普通容器用于列表视图项目，这样您可以在点击时更改其大小。这将需要进行很多微调。
通过这个教程，您可以构建自己的内容。
英文:
- First you create a List, where you will specify your tab Items, with
color, name and so on. It would be better to create a model for that
and hold them in a List. - Then you generate a Horizontal Scrollable-Listview. And you will wrap each ListView with an InkWell, so they are "Tab-able". also They have to be wrapped within a container, where you give them on the top lieft and right a rounded border and the color you wish
- Then create a Container with height of 2 and update its color, based on the tablist-item color.
- If you also want to be more advanced, you can take an Animated Container instead of a normal Container for the Listview-Items, so you can change its size when its tapped. This will need a lot of fine tuning.
With this cookbook you can build your own.
答案2
得分: 1
I create my tabs with the following code:
Column(
children: [
Container(
padding: EdgeInsets.zero,
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[2].title,
style: const TextStyle(
fontSize: 18, color: Colors.white),
)),
),
],
),
),
],
),
],
),
),
Container(
decoration: BoxDecoration(
border: Border.all(
width: 0.0,
color: homeProvider.tabs[homeProvider.tabIndex].color,
),
color: homeProvider.tabs[homeProvider.tabIndex].color,
),
padding: EdgeInsets.zero,
height: 5.0,
)
],
)
The output looks like this:
英文:
Thanks to @MrOrhan I create my tabs with bellow code
Column(
children: [
Container(
padding: EdgeInsets.zero,
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[2].title,
style: const TextStyle(
fontSize: 18, color: Colors.white),
)),
),
],
),
),
],
),
],
),
),
Container(
decoration: BoxDecoration(
border: Border.all(
width: 0.0,
color: homeProvider.tabs[homeProvider.tabIndex].color,
),
color: homeProvider.tabs[homeProvider.tabIndex].color,
),
padding: EdgeInsets.zero,
height: 5.0,
)
],
),
and the output is like bellow
UPDATE : The Code has Updated to disappear little gap btween the tabs and the container below it
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论