Question

我正在使用TabBar小部件，我想像这张图片一样自定义TabBar视图。我试过很多次，两个标签之间有一些空格。

这是我用来自定义标签视图的代码。

            LayoutBuilder(
              builder: (_, constraints) {
                return Container(
                  width: constraints.maxWidth,
                  height: constraints.maxHeight,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Container(                                
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          children: <Widget>[
                            //your first 2 button
                          ],
                        ),
                      ),
                      Container(
                        child: //your bottom button,
                      ),
                    ],
                  ),
                );
              },
            ),

输出

Answer 1

如果您需要自定义标签，我漂亮的标签源代码可能会对您有所帮助，这与本文无关。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';


class StudentScreen extends StatefulWidget {
  @override
  _StudentScreenState createState() => _StudentScreenState();
}

class _StudentScreenState extends State<StudentScreen> with SingleTickerProviderStateMixin {
  TabController controller;
  int activeTabIndex = 1;

  @override
  void initState() {
    super.initState();
    controller = TabController(
      length: 2,
      initialIndex: 1,
      vsync: this,
    );
    controller.addListener(() {
      setState(() {
        activeTabIndex = controller.index;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: Column(
          children: <Widget>[
            TabBar(
              indicatorColor: Colors.transparent,
              tabs: [
                Tab(
                  child: Container(
                      width: 100,
                      height: 36,
                      decoration: activeTabIndex == 0
                          ? BoxDecoration(
                              border: Border.all(color: Colors.blue, width: 2),
                              borderRadius: BorderRadius.all(Radius.circular(16)),
                            )
                          : null,
                      child: Padding(
                        padding: EdgeInsets.fromLTRB(8, 4, 8, 0),
                        child: Center(child: Text("Tab one", style: TextStyle(color: Colors.black))),
                      )),
                ),
                Tab(
                  child: Container(
                      width: 100,
                      height: 36,
                      decoration: activeTabIndex == 1
                          ? BoxDecoration(
                              border: Border.all(color: Colors.blue, width: 2),
                              borderRadius: BorderRadius.all(Radius.circular(16)),
                            )
                          : null,
                      child: Padding(
                        padding: EdgeInsets.fromLTRB(8, 4, 8, 0),
                        child: Center(child: Text("Tab two", style: TextStyle(color: Colors.black))),
                      )),
                ),
              ],
              controller: controller,
            ),
            Container(
              child: Row(
                children: <Widget>[],
              ),
            ),
            Expanded(
              child: Container(
                child: TabBarView(
                  controller: controller,
                  children: <Widget>[
                    Center(child: Text("Tab one")),
                    Center(child: Text("Tab two")),
                  ],
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

Answer 2

您不仅可以将两个选项卡的半径赋予整个底部你可以做这样的事情只需给所有侧面加上半径，就我而言，只需要给右上方和左上方

PreferredSize(
                  child: Container(
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(30),
                        topRight: Radius.circular(30),
                      ),
                    ),
                    child: TabBar(
                      // indicatorPadding: EdgeInsets.all(30),

                      tabs: [
                        Tab(
                          child: Text(
                            "Expnanse",
                            style: TextStyle(color: Colors.black),
                          ),
                        ),
                        Tab(
                          child: Text(
                            "Income",
                            style: TextStyle(color: Colors.black),
                          ),
                        ),
                      ],
                    ),
                  ),
                  preferredSize: const Size.fromHeight(70.0),
                ),
              ),

自定义颤动标签栏

2 个答案: