close

Flutter TabBar su langelio šešėliu: diegimo vadovas

Norėdami pritaikyti langelio šešėlį į TabBar in Flutter, galite apvynioti jį a Container ir naudoti BoxDecoration ypatybę. Štai pavyzdys:

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

Jei norite pridėti šešėlio efektą TabBar, galite apvynioti TabBar a Container ir pritaikyti 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'),  
    ],  
 ),  
),

Šiame pavyzdyje BoxShadow naudojamas šešėlio efektui sukurti TabBar. Galite tinkinti spalvą, sklaidos spindulį, suliejimo spindulį ir poslinkį, kad pasiektumėte norimą šešėlio išvaizdą.

Nepamirškite pakoreguoti šešėlių savybių, kad jos atitiktų jūsų dizaino reikalavimus.

Atminkite, kad šešėlio pritaikymas gali neveikti, jei AppBar jau naudojate aukštį. Tokiais atvejais gali tekti naudoti pasirinktinius valdiklius arba koreguoti dizainą, kad atitiktų abu efektus.