Chun scáth bhosca a chur i bhfeidhm ar TabBar
in Flutter, is féidir leat é a fhilleadh isteach Container
agus an BoxDecoration
réadmhaoin a úsáid. Seo sampla:
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),
],
),
),
);
}
}
Más mian leat éifeacht scátha a chur leis an TabBar
, is féidir leat an timfhilleadh TabBar
isteach a Container
agus na 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'),
],
),
),
Sa sampla seo, BoxShadow
úsáidtear an chun scáthchruth a chruthú don TabBar
. Is féidir leat an dath a shaincheapadh, ga scaipeadh, ga doiléir, agus a fhritháireamh chun an cuma scáth atá ag teastáil a bhaint amach.
Cuimhnigh airíonna an scátha a choigeartú chun do riachtanais dearaidh a mheaitseáil.
Tabhair faoi deara go mb’fhéidir nach n-oibreoidh sé má AppBar
tá tú ag úsáid ingearchló cheana féin. I gcásanna den sórt sin, b'fhéidir go mbeadh ort giuirléidí saincheaptha a úsáid nó an dearadh a choigeartú chun freastal ar an dá éifeacht.