[flutter]：如何使Container()的顏色填充TabBar()選項卡中的整個區域？

我正在嘗試使用具有不同背景顏色的選項卡來實作 TabBar。選項卡托管具有不同裝飾顏色的 Container() 小部件。問題是背景顏色沒有填滿整個選項卡區域。下面是代碼片段：

class Changes extends StatelessWidget {
  Changes({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        toolbarHeight: 75,
        foregroundColor: Colors.yellowAccent[400],
        backgroundColor: Colors.grey[900],
        centerTitle: true,
        title: Text('Hello'),
      ),
      body: DefaultTabController(
        length: 2,
        child: Column(
          children: [
            TabBar(
              tabs: [
                Container(
                  decoration: const BoxDecoration(
                    gradient: LinearGradient(
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                      colors: [
                        Colors.lightGreenAccent,
                        Colors.green
                      ]
                    ),
                  ),
                  height: MediaQuery.of(context).size.height * 0.05,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text('Up',
                        style: TextStyle(
                          color: Colors.grey[900],
                          fontSize: 22
                      )),
                      SizedBox(width: 15),
                      Icon(Icons.arrow_upward, color: Colors.grey[900]),
                    ],
                  ),
                ),
                Container(
                  decoration: const BoxDecoration(
                    gradient: LinearGradient(
                        begin: Alignment.topCenter,
                        end: Alignment.bottomCenter,
                        colors: [
                          Colors.red,
                          Colors.deepOrangeAccent
                        ]
                    ),
                  ),
                  height: MediaQuery.of(context).size.height * 0.05,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text('Down',
                          style: TextStyle(
                              color: Colors.grey[900],
                              fontSize: 22
                          )),
                      SizedBox(width: 15),
                      Icon(Icons.arrow_downward, color: Colors.grey[900]),
                    ],
                  ),
                ),
              ]),
            Expanded(
              child: TabBarView(
                children: [
                  Container(
                    child: Center(child: Text('Up')),
                  ),
                  Container(
                    child: Center(child: Text('Down')),
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

螢屏如下所示：

螢屏

我怎么解決這個問題？為什么 BoxDecoration() 的顏色不能填滿整個選項卡空間？

uj5u.com熱心網友回復：

您好，這部分的答案真的很簡單..您需要添加：

 TabBar(
 labelPadding: EdgeInsets.zero, // this line
 tabs: [])

如果有幫助，請點贊。

標籤：

上一篇：如何列印出物件的所有鍵值對

下一篇：“Null”型別不是“Map<String,dynamic>”型別的子型別