Flutter Vrstica zavihkov s senco polja: Vodnik za implementacijo

Če želite uporabiti senco okvirja za TabBar in Flutter, ga lahko zavijete v Container in uporabite BoxDecoration lastnost. Tukaj je primer:

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),  
          ],  
       ),  
     ),  
   );  
  }  
}  

Če želite dodati učinek sence TabBar, lahko zavijete TabBar v Container in uporabite 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'),  
    ],  
 ),  
),  

V tem primeru BoxShadow se uporablja za ustvarjanje učinka sence za TabBar. Prilagodite lahko barvo, polmer širjenja, polmer zamegljenosti in odmik, da dosežete želeni videz sence.

Ne pozabite prilagoditi lastnosti senc, da bodo ustrezale vašim oblikovalskim zahtevam.

Upoštevajte, da uporaba sence morda ne bo delovala, če AppBar že uporabljate višino. V takšnih primerih boste morda morali uporabiti pripomočke po meri ali prilagoditi dizajn, da bo ustrezal obema učinkoma.