close

Flutter 带有框阴影的 TabBar： 实施指南

要将框阴影应用于 TabBar in Flutter，您可以将其包装在 a 中 Container 并使用该 BoxDecoration 属性。 这是一个例子： 

import 'package:flutter/material.dart';  
  
void main() {  
  runApp(MyApp());  
}  
  
class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      home: MyHomePage(),  
   );  
  }  
}  
  
class MyHomePage extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return DefaultTabController(  
      length: 3,  
      child: Scaffold(  
        appBar: AppBar(  
          title: Text('TabBar with Shadow'),  
          bottom: TabBar(  
            tabs: [  
              Tab(text: 'Tab 1'),  
              Tab(text: 'Tab 2'),  
              Tab(text: 'Tab 3'),  
            ],  
         ),  
       ),  
        body: TabBarView(  
          children: [  
            Container(color: Colors.red),  
            Container(color: Colors.green),  
            Container(color: Colors.blue),  
          ],  
       ),  
     ),  
   );  
  }  
}

如果要向 中添加阴影效果 TabBar，可以将 包裹 TabBar 在 a 中 Container 并应用 BoxDecoration： 

Container(  
  decoration: BoxDecoration(  
    boxShadow: [  
      BoxShadow(  
        color: Colors.grey.withOpacity(0.5),  
        spreadRadius: 5,  
        blurRadius: 7,  
        offset: Offset(0, 3), // changes position of shadow  
     ),  
    ],  
 ),  
  child: TabBar(  
    tabs: [  
      Tab(text: 'Tab 1'),  
      Tab(text: 'Tab 2'),  
      Tab(text: 'Tab 3'),  
    ],  
 ),  
),

在此示例中， BoxShadow 用于为 创建阴影效果 TabBar。 您可以自定义颜色、扩散半径、模糊半径和偏移，以获得所需的阴影外观。

请记住调整阴影属性以满足您的设计要求。

AppBar 请注意，如果您已经使用高程， 则应用阴影可能不起作用。 在这种情况下，您可能需要使用自定义小部件或调整设计以适应这两种效果。