Skip to content

Commit

Permalink
[flutter_web] navigationBarCell
Browse files Browse the repository at this point in the history
  • Loading branch information
@chen56
chen56 committed May 18, 2024
1 parent af7b7d0 commit f2144cd
Show file tree
Hide file tree
Showing 2 changed files with 169 additions and 48 deletions.
85 changes: 43 additions & 42 deletions notes/flutter_web/lib/routes/notes/widgets/container_widgets/bar/page.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ b
> ref: <https://api.dev/flutter/material/AppBar-class.html>
'''));

print=print.addCell(title:const Text("new cell-----------------"));
print = print.addCell(title: const Text("new cell-----------------"));
print(
AppBar(
title: const Text('AppBar Title'),
Expand All @@ -40,7 +40,7 @@ b
),
);

print=print.addCell(title:const Text("new cell-----------------"));
print = print.addCell(title: const Text("new cell-----------------"));
print(const MD(r'''
## BottomAppBar
Expand All @@ -51,34 +51,35 @@ b
'''));
//

print=print.addCell(title:const Text("new cell-----------------"));
print = print.addCell(title: const Text("new cell-----------------"));
print(
BottomAppBar(
// shape: CircularNotchedRectangle(),
child: Row(
children: <Widget>[
IconButton(
tooltip: 'Open navigation menu',
icon: const Icon(Icons.menu),
onPressed: () {},
),
const Spacer(),
IconButton(
tooltip: 'Search',
icon: const Icon(Icons.search),
onPressed: () {},
),
IconButton(
tooltip: 'Favorite',
icon: const Icon(Icons.favorite),
onPressed: () {},
),
],
Scaffold(
bottomNavigationBar: BottomAppBar(
child: Row(
children: <Widget>[
IconButton(
tooltip: 'Open navigation menu',
icon: const Icon(Icons.menu),
onPressed: () {},
),
const Spacer(),
IconButton(
tooltip: 'Search',
icon: const Icon(Icons.search),
onPressed: () {},
),
IconButton(
tooltip: 'Favorite',
icon: const Icon(Icons.favorite),
onPressed: () {},
),
],
),
),
),
);

print=print.addCell(title:const Text("new cell-----------------"));
print = print.addCell(title: const Text("new cell-----------------"));
print(const MD(r'''
## ~~BottomNavigationBar~~
Expand All @@ -97,7 +98,7 @@ b
先看看不加逻辑时NavigationBar的长相：
'''));

print=print.addCell(title:const Text("new cell-----------------"));
print = print.addCell(title: const Text("new cell-----------------"));
print(
Column(
children: [
Expand All @@ -118,12 +119,12 @@ b
),
);

print=print.addCell(title:const Text("new cell-----------------"));
print = print.addCell(title: const Text("new cell-----------------"));
print(const MD(r'''
NavigationBar 的主要用途类似TabBar，加上[NavigationBar.onDestinationSelected]的事件，就能在不同页面切换，如下：
'''));

print=print.addCell(title:const Text("new cell-----------------"));
print = print.addCell(title: const Text("new cell-----------------"));
var currentPageIndex = 0;
Widget buildNavigationBar(context, setState) {
var views = [
Expand Down Expand Up @@ -151,7 +152,7 @@ NavigationBar 的主要用途类似TabBar，加上[NavigationBar.onDestinationSe
builder: buildNavigationBar,
));

print=print.addCell(title:const Text("new cell-----------------"));
print = print.addCell(title: const Text("new cell-----------------"));
print(const MD(r'''
## NavigationRail
Expand All @@ -163,7 +164,7 @@ NavigationBar 的主要用途类似TabBar，加上[NavigationBar.onDestinationSe
> a BottomNavigationBar should be used instead.
'''));

print=print.addCell(title:const Text("new cell-----------------"));
print = print.addCell(title: const Text("new cell-----------------"));

print(
Row(
Expand Down Expand Up @@ -204,7 +205,7 @@ NavigationBar 的主要用途类似TabBar，加上[NavigationBar.onDestinationSe
),
);

print=print.addCell(title:const Text("new cell-----------------"));
print = print.addCell(title: const Text("new cell-----------------"));
print(const MD(r'''
## TabBar
Expand All @@ -223,7 +224,7 @@ TabController主要是为了协调Tab和TabView的切换关系。
TabBar不加TabView长这样：
'''));

print=print.addCell(title:const Text("new cell-----------------"));
print = print.addCell(title: const Text("new cell-----------------"));
print(const DefaultTabController(
length: 3,
child: TabBar(
Expand All @@ -244,12 +245,12 @@ TabBar不加TabView长这样：
),
));

print=print.addCell(title:const Text("new cell-----------------"));
print = print.addCell(title: const Text("new cell-----------------"));
print(const MD(r'''
再来看看加了TabView的完整体，即TabBar实际使用模式：
'''));

print=print.addCell(title:const Text("new cell-----------------"));
print = print.addCell(title: const Text("new cell-----------------"));
print(const DefaultTabController(
initialIndex: 1,
length: 3,
Expand All @@ -276,7 +277,7 @@ TabBar不加TabView长这样：
),
));

print=print.addCell(title:const Text("new cell-----------------"));
print = print.addCell(title: const Text("new cell-----------------"));
print(const MD("""
上面用法和[NavigationBar]很像，主要就是在多个页面间切换，好处在，连事件逻辑都不需要，组件树如下结构即可：
Expand All @@ -294,7 +295,7 @@ DefaultTabController
## SnackBar
"""));

print=print.addCell(title:const Text("new cell-----------------"));
print = print.addCell(title: const Text("new cell-----------------"));
onPressed() {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
Expand Down Expand Up @@ -323,7 +324,7 @@ DefaultTabController
),
));

print=print.addCell(title:const Text("new cell-----------------"));
print = print.addCell(title: const Text("new cell-----------------"));
print(const MD(r'''
## ButtonBar
Expand All @@ -334,7 +335,7 @@ DefaultTabController
按钮的布局容器，可以按内容的实际宽度在行或列之间调整，其横向还是纵向排列，取决于其宽度：
'''));

print=print.addCell(title:const Text("new cell-----------------"));
print = print.addCell(title: const Text("new cell-----------------"));
print(
Container(
width: 600,
Expand All @@ -354,7 +355,7 @@ DefaultTabController
),
);

print=print.addCell(title:const Text("new cell-----------------"));
print = print.addCell(title: const Text("new cell-----------------"));
print(const MD(r'''
## OverflowBar
Expand All @@ -363,7 +364,7 @@ DefaultTabController
OverflowBar常用场景是Dialog的按钮组容器，children宽度够(未溢出)，横着排，不够（溢出），就竖着排，修改下面最外层Container.width看看：
'''));

print=print.addCell(title:const Text("new cell-----------------"));
print = print.addCell(title: const Text("new cell-----------------"));
print(
SizedBox(
width: 300,
Expand Down Expand Up @@ -392,7 +393,7 @@ OverflowBar常用场景是Dialog的按钮组容器，children宽度够(未溢出
),
);

print=print.addCell(title:const Text("new cell-----------------"));
print = print.addCell(title: const Text("new cell-----------------"));
print(const MD(r'''
## PlatformMenuBar
Expand All @@ -411,7 +412,7 @@ MenuBar相关组件：
- MenuItemButton, a leaf menu item which displays the label, an optional shortcut label, and optional leading and trailing icons.
'''));

print=print.addCell(title:const Text("new cell-----------------"));
print = print.addCell(title: const Text("new cell-----------------"));
click() {
showAboutDialog(
context: context,
Expand Down
132 changes: 126 additions & 6 deletions notes/flutter_web/lib/routes/notes/widgets/index/page.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -462,8 +462,119 @@ content and the actions are displayed below the content.'''),
});
}

Widget dividerCell() {
return const Column(
children: [
SizedBox(
child: Column(
children: [
Text('Divider'),
Divider(),
Text('Divider'),
],
),
),
SizedBox(
height: 100,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('VerticalDivider'),
VerticalDivider(),
Text('VerticalDivider'),
],
)),
],
);
}

Widget spacerCell() {
return const Column(
children: [
Row(
children: [
Text('Row left'),
Spacer(),
Text('Row right'),
],
),
],
);
}

Widget placeholderCell() {
return const Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Placeholder(fallbackWidth: 100, fallbackHeight: 100),
Placeholder(
fallbackWidth: 100,
fallbackHeight: 100,
child: SizedBox(width: 100, height: 100, child: Text("带child的")),
),
],
);
}

Widget bottomAppBarCell() {
return SizedBox(
width: 300,
height: 200,
child: Scaffold(
body: const Placeholder(),
floatingActionButton: FloatingActionButton(onPressed: () {}, child: const Icon(Icons.add)),
bottomNavigationBar: BottomAppBar(
child: Row(
children: <Widget>[
IconButton(tooltip: 'Open navigation menu', icon: const Icon(Icons.menu), onPressed: () {}),
const Spacer(),
IconButton(tooltip: 'Search', icon: const Icon(Icons.search), onPressed: () {}),
IconButton(tooltip: 'Favorite', icon: const Icon(Icons.favorite), onPressed: () {}),
],
),
),
),
);
}

Widget navigationBarCell() {
final selected = 0.signal();
List<(NavigationDestination, Widget)> destinations = [
(
const NavigationDestination(icon: Icon(Icons.explore), label: 'Explore'),
Container(width: double.infinity, height: double.infinity, color: Colors.blue.shade100, child: const Text("Explore")),
),
(
const NavigationDestination(icon: Icon(Icons.commute), label: 'Commute'),
Container(width: double.infinity, height: double.infinity, color: Colors.green.shade100, child: const Text("Commute")),
),
];
return Watch((context) {
return SizedBox(
width: 300,
height: 200,
child: Scaffold(
body: destinations[selected.value].$2,
bottomNavigationBar: NavigationBar(
onDestinationSelected: (newSelection) => selected.value = newSelection,
selectedIndex: selected.value,
destinations: destinations.map((e) => e.$1).toList(),
),
),
);
});
}

var all = Column(
children: [
Level1MasonryLayout(title: "分割、填充、留白", cellWidth: 300, children: [
CellView(title: "Divider", child: dividerCell()),
CellView(title: "Spacer", child: spacerCell()),
CellView(title: "Placeholder", child: placeholderCell()),
]),
Level1MasonryLayout(title: "布局,Layout", cellWidth: 500, children: [
CellView(title: "Container", child: containerCell(context)),
]),
Level1MasonryLayout(title: "button&input&form", cellWidth: 500, children: [
CellView(title: "ButtonStyleButton", child: buttonStyleButtonCell(context)),
CellView(title: "FloatingActionButton", child: floatingActionButtonCell(context)),
Expand All @@ -474,17 +585,19 @@ content and the actions are displayed below the content.'''),
CellView(title: "Badge", child: badgesCell(context)),
CellView(title: "ProgressIndicator", child: progressIndicatorCell(context)),
CellView(title: "ProgressIndicator2", child: progressIndicator2Cell(context)),
]),
Level1MasonryLayout(title: "高级模版容器,Advanced template container", cellWidth: 500, children: [
CellView(title: "SnackBar", child: snackBarCell(context)),
CellView(title: "bottomSheet", child: bottomSheetCell(context)),
CellView(title: "dialog", child: dialogCell()),
]),
//
Level1MasonryLayout(title: "布局,Layout", cellWidth: 500, children: [
CellView(title: "Container", child: containerCell(context)),
CellView(title: "bottomSheet", child: bottomSheetCell(context)),
]),
Level1MasonryLayout(title: "装饰器,Decorator", cellWidth: 500, children: [
CellView(title: "Card", child: cardCell(context)),
]),
Level1MasonryLayout(title: "导航与页面", cellWidth: 300, children: [
CellView(title: "BottomAppBar", child: bottomAppBarCell()),
CellView(title: "NavigationBar", child: navigationBarCell()),
])
],
);

Expand All @@ -494,14 +607,21 @@ content and the actions are displayed below the content.'''),
class CellView extends StatelessWidget {
final String title;
final Widget child;
final BoxConstraints? constraints;

const CellView({super.key, required this.title, required this.child});
const CellView({
super.key,
required this.title,
this.constraints,
required this.child,
});

@override
Widget build(BuildContext context) {
var colors = Theme.of(context).colorScheme;
var textStyle = Theme.of(context).textTheme;
return Container(
constraints: constraints,
decoration: BoxDecoration(color: colors.surfaceContainer, borderRadius: BorderRadius.circular(8.0), border: Border.all(width: 1, color: colors.outlineVariant)),
child: Column(
children: [
Expand Down

0 comments on commit f2144cd

Please sign in to comment.