Flutter에서 Cupertino Sliver 내비게이션 바를 사용하는 방법은 무엇입니까?

CupertinoSilver NavigationBar에서 같은 이름의 widget from Flutter을 찾을 수 있습니다. 커뮤니티 전체에서 개발자가 자주 사용합니다.

적절한 위젯을 사용하는 것은 엔터프라이즈급 애플리케이션 개발에 필요한 필수 사항Flutter developer skills 중 하나입니다. 여기에서 우리는 앱이 지체 없이 원활하고 빠르게 작동하도록 고객이 올바른 위젯을 선택하도록 돕습니다. CupertinoSilver NavigationBar 위젯은 프로그래머가 iOS 테마 요소를 iOS platform용으로 만든 Flutter 프로그램에 통합하는 데 도움을 주기 위해 만들어졌습니다. 데뷔 이후 많은 커뮤니티 지원을 받았습니다.

이 기사에서는 Cupertino Sliver 내비게이션 바 클래스의 개요, 사용법 및 구현에 대해 안내해 드리겠습니다.

CustomScrollView는 CupertinoSliverNavigationBar가 위치하는 작은 그룹입니다. 두 부분이 Cupertino 슬라이버 내비게이션 바를 구성하며 그 중 하나는 상단에 고정되어 있습니다. 두 번째는 큰 제목이 있고 슬라이드 아웃됩니다. 두 번째 단락은 첫 번째 단락 다음에 나옵니다.

작은 조각이 넓어지면 아래로 미끄러져 큰 제목이 드러납니다. 조각이 부서지면 첫 번째 부분 뒤에 묻힐 것입니다. CupertinoNavigationBar와 함께 스크롤하는 동안 유지되는 정적 상단 부분에 선행 및 후행 위젯을 제공합니다.

앱에서 CupertinoNavigationBar 위젯을 사용하려면 생성자를 사용하십시오.

CupertinoSliverNavigationBar(
{Key? key,
Widget? largeTitle,
Widget? leading,
bool automaticallyImplyLeading = true,
bool automaticallyImplyTitle = true,
String? previousPageTitle,
Widget? middle,
Widget? trailing,
Border? border = _kDefaultNavBarBorder,
Color? backgroundColor,
Brightness? brightness,
EdgeInsetsDirectional? padding,
bool transitionBetweenRoutes = true,
Object heroTag = _defaultHeroTag,
bool stretch = false}
)

다음은 CupertinoNavigationBar 위젯의 속성입니다.

1. largeTitle: 내비게이션 바가 올라가면 이 텍스트는 상단 정적 내비게이션 바에서 더 큰 글꼴로 그 아래에 표시됩니다.

2. automaticImplyLeading: null 위젯의 경우 선행 위젯을 암시할지 여부를 결정합니다.

3. 선행: 내비게이션 바 시작 부분에 위젯을 추가합니다. 위젯은 값으로 허용됩니다.

4. heroTag: 경로당 내비게이션 바가 하나만 있는 한 기본 태그를 사용할 때 동일한 내비게이터의 모든 내비게이션 바가 서로 전환될 수 있습니다.

5. automaticImplyLeading: 이 속성을 true로 설정하면 시나리오에 적합한 선행 위젯이 자동으로 표시됩니다. 부울 값을 허용합니다.

6. previousPageTitle: 이 변수는 이전 페이지 경로의 제목을 지정하는 데 사용됩니다. 은색 탐색 표시줄은 행간이 null이고 automaticImplyLeading이 true인 경우 이 제목을 행간으로 사용합니다. 문자열이 값으로 허용됩니다.

CupertinoNavigationBar의 예를 살펴보겠습니다.

void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
@override
State createState() => _MyAppState();
}
class _MyAppState extends State {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: CupertinoPageScaffold(
backgroundColor: Colors.white,
child: CustomScrollView(
slivers: [
CupertinoSliverNavigationBar(
backgroundColor: Colors.black,
leading: CupertinoNavigationBarBackButton(
onPressed: () {},
color: CupertinoColors.activeBlue,
),
middle: const Text(
"Cupertino Sliver Navigation Bar",
style: TextStyle(color: Colors.white),
),
trailing: CupertinoButton(
padding: EdgeInsets.zero,
child: const Text(
"Done",
style: TextStyle(
color: CupertinoColors.activeBlue,
),
),
onPressed: () {},
),
largeTitle: const Padding(
padding: EdgeInsets.only(left: 20),
child: Text(
"Large Tile",
style: TextStyle(
color: CupertinoColors.white,
),
),
),
previousPageTitle: "Back",
),
SliverGrid(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) => Padding(
padding: const EdgeInsets.only(left: 10, right: 10),
child: Container(
color: CupertinoColors.systemGrey3,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Image.network(
"https://picsum.photos/250?image=9",
fit: BoxFit.fill,
),
)),
),
childCount: 10))
],
),
),
);
}
}

산출:

결론:

CupertinoSilverNavigationBar는 사용자 경험을 향상시키는 환상적인 도구입니다. 사용자가 자신의 기대를 이해하고 유지하는 데 도움이 됩니다. 애플리케이션에 ios 스타일의 사용자 인터페이스와 테마를 제공하는 데 자주 사용됩니다. 이 기사가 도움이 되길 바랍니다. 우리는 B2B 및 B2C 고객을 위한 고객 중심 모바일 애플리케이션 솔루션 분야에서 다년간의 경험을 보유한 최고 수준의 선두Flutter development company입니다. 고도로 숙련된 모바일 애플리케이션 개발자와 함께 애플리케이션을 읽어보세요. 자세한 내용은 contact us now .