颤抖如何创建可点击的标签

问题描述

如何从图像素描创建基本设计。具有选项卡列表的第一个容器是静态的，并且位于其上方的容器是动态的，并且包含文本-如果单击选项卡1，则选项卡1的文本，如果单击选项卡2，则选项卡2的文本。如果单击Tab1或Tab2的文本，也必须在其下划线。

类似这样的内容：

解决方法

我不确定我是否完全了解你。
但是，如果要实现TabBar，则可以使用此处记录的抖动TabBar()： https://flutter.dev/docs/cookbook/design/tabs

或者您可以使用一个软件包： https://pub.dev/packages/tabbar

,

使用GestureDetector小部件来告诉用户何时单击选项卡，然后使用setState更新状态可能是最简单的方法。

这是使用有状态的小部件和setState更新页面的非常基本的示例。不过，您可以使用任何状态管理策略来解决此问题。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',theme: ThemeData(
        primarySwatch: Colors.blue,visualDensity: VisualDensity.adaptivePlatformDensity,),home: Scaffold(body: MyHomePage()),);
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String selectedTab;
  static const String TAB_1 = 'Tab 1';
  static const String TAB_2 = 'Tab 2';

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,children: [
        Expanded(
          flex: 1,child: Row(
            crossAxisAlignment: CrossAxisAlignment.end,children: [
              GestureDetector(
                onTap: () {
                  setState(() => selectedTab = TAB_1);
                },child: Container(
                  padding: const EdgeInsets.all(12.0),child: Text(TAB_1),decoration: selectedTab == TAB_1
                      ? BoxDecoration(border: Border(bottom: BorderSide()))
                      : null,GestureDetector(
                onTap: () {
                  setState(() => selectedTab = TAB_2);
                },child: Text(TAB_2),decoration: selectedTab == TAB_2
                      ? BoxDecoration(border: Border(bottom: BorderSide()))
                      : null,)
            ],Container(height: 20.0),Expanded(
          flex: 2,child: Container(
            decoration: BoxDecoration(
                border: Border.all(width: 5),borderRadius: BorderRadius.circular(12.0)),child: Center(child: Text(textForTab(selectedTab))),)
      ],);
  }

  String textForTab(String tabId) {
    switch (tabId) {
      case TAB_1:
        return 'Text for Tab 1';
      case TAB_2:
        return 'Text for Tab 2';
      default:
        return 'Select Tab';
    }
  }
}

,

您可以使用TabBar小部件来完成它。

class CustomTabBar extends StatefulWidget {
 @override
 _CustomTabBarState createState() => _CustomTabBarState();
}

class _CustomTabBarState extends State<CustomTabBar>
  with SingleTickerProviderStateMixin {
  TabController _tabController;

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

  @override
  void dispose() {
   super.dispose();
   _tabController.dispose();
  }

  @override
  Widget build(BuildContext context) {
   return Scaffold(
    appBar: AppBar(
     title: Text(
      'Tab Demo',body: 
     Column(
      children: [
        Container(
          height: 45,child: TabBar(
            controller: _tabController,indicator: BoxDecoration(
              border: Border(bottom: BorderSide(color: Colors.blue,width: 2,style: 
              BorderStyle.solid)),labelColor: Colors.blue,unselectedLabelColor: Colors.black,tabs: [
              // first tab
              Tab(
                text: 'Home',// second tab
              Tab(
                text: 'Profile',],// tab bar view
        Expanded(
          child: TabBarView(
            controller: _tabController,children: [
              // first tab widget 
              Center(
                child: Text(
                  'Home',style: TextStyle(
                    fontSize: 26,fontWeight: FontWeight.bold,// Second tab widget
              Center(
                child: Text(
                  'Profile',);
  }
}