Question

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

类似这样的内容：

Answer 1

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

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

Answer 2

使用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: Container(
                  padding: const EdgeInsets.all(12.0),
                  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';
    }
  }
}

Answer 3

您可以使用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',
                  style: TextStyle(
                    fontSize: 26,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ],
          ),
        ),
      ],
    ),
  );
  }
}

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

3 个答案: