分享
三行代码  ›  专栏  ›  技术社区  ›  Purushothaman U

如何使选项卡栏中的文本显示在同一行中?

  •  0
  • Purushothaman U  · 技术社区  · 1 周前

    我试图克隆一个名为stucor的应用程序,但该应用程序中的选项卡栏是不同的,当我试图在flutter中实现时,选项卡栏中的所有文本都是相同大小的,并且其中的文本有很多行,比如 enter image description here

    所以,我试着用FittedBox小部件包装文本,但是字体大小变小了,如上图所示。我想达到的目的是 enter image description here

      Widget build(BuildContext context) {
        return DefaultTabController(
          length: 7,
              child: Scaffold(
            appBar: AppBar(
              bottom: TabBar(
                tabs: [
    
                  Tab(child: FittedBox(child: Text('HOME', style: TextStyle(color: Colors.black),)) ),
                  Tab(child: Text('RESULTS', style: TextStyle(color: Colors.black),) ),
                  Tab(child: Text('INTERNALS', style: TextStyle(color: Colors.black),) ),
                  Tab(child: Text('NOTES', style: TextStyle(color: Colors.black),) ),
                  Tab(child: Text('EVENTS', style: TextStyle(color: Colors.black),) ),
                  Tab(child: Text('QUESTION PAPERS', style: TextStyle(color: Colors.black),) ),
                  Tab(child: Text('JOBS', style: TextStyle(color: Colors.black),) )]),```
    
    1 回复  |  直到 1 周前
        1
  •  2
  •   Timilehin Jegede    1 周前

    正如评论中提到的,你可以获得 TabBar 通过设置 isScrollable 制表符 true .

    我使用小部件树添加了一个示例:

     Widget build(BuildContext context) {
        return DefaultTabController(
          length: 7,
              child: Scaffold(
            appBar: AppBar(
              bottom: TabBar(
                isScrollable: true, // new line
                tabs: [
    
                  Tab(child: FittedBox(child: Text('HOME', style: TextStyle(color: Colors.black),)) ),
                  Tab(child: Text('RESULTS', style: TextStyle(color: Colors.black),) ),
                  Tab(child: Text('INTERNALS', style: TextStyle(color: Colors.black),) ),
                  Tab(child: Text('NOTES', style: TextStyle(color: Colors.black),) ),
                  Tab(child: Text('EVENTS', style: TextStyle(color: Colors.black),) ),
                  Tab(child: Text('QUESTION PAPERS', style: TextStyle(color: Colors.black),) ),
                  Tab(child: Text('JOBS', style: TextStyle(color: Colors.black),) )]),