Why
The follow-up sample from PR #9 added a NavigationBar for switching between
"Basics / Buttons / Pickers" tabs, but without Scaffold the bar flows
inline as a normal Column child instead of being pinned to the bottom of
the screen. It currently floats in the middle, which looks wrong and is
unrepresentative of how Material 3 apps are laid out.
What
Bind androidx.compose.material3.ScaffoldKt.Scaffold in the same shape as
AlertDialog (PR #6) — slot-style C# facade with named properties:
TopBar (optional Function2)
BottomBar (optional Function2)
SnackbarHost (optional Function1)
FloatingActionButton (optional Function0)
- content (the
ComposableContainer body — required)
Scaffold's overload is stripped from the binding by the
@JvmInline value class color params (containerColor, contentColor),
so we'll need a raw JNI bridge in ComposeBridges.cs against the mangled
name (likely Scaffold-27mzLpw or similar — verify with javap against
the Xamarin.AndroidX.Compose.Material3Android 1.4.0.3 AAR), plus a
[ComposeDefaults("ScaffoldDefault", ...)] declarative attribute for the
$default bitmask.
Sample fix
In the same PR, update src/ComposeNet.Sample/MainActivity.cs to wrap the
existing per-tab content in a Scaffold and move the NavigationBar to
the BottomBar slot, e.g.:
new Scaffold
{
BottomBar = new NavigationBar
{
new NavigationBarItem(selected: tab.Value == 0, onClick: () => tab.Value = 0)
{
Icon = new Text("🔢"), Label = new Text("Basics"),
},
// ...
},
Body = tabContent,
}
That makes the bottom bar look correct on the emulator (pinned to the
bottom edge above the system nav bar) and gives the sample a more
realistic Material 3 shape.
References
Why
The follow-up sample from PR #9 added a
NavigationBarfor switching between"Basics / Buttons / Pickers" tabs, but without
Scaffoldthe bar flowsinline as a normal
Columnchild instead of being pinned to the bottom ofthe screen. It currently floats in the middle, which looks wrong and is
unrepresentative of how Material 3 apps are laid out.
What
Bind
androidx.compose.material3.ScaffoldKt.Scaffoldin the same shape asAlertDialog(PR #6) — slot-style C# facade with named properties:TopBar(optionalFunction2)BottomBar(optionalFunction2)SnackbarHost(optionalFunction1)FloatingActionButton(optionalFunction0)ComposableContainerbody — required)Scaffold's overload is stripped from the binding by the@JvmInline value classcolor params (containerColor,contentColor),so we'll need a raw JNI bridge in
ComposeBridges.csagainst the mangledname (likely
Scaffold-27mzLpwor similar — verify withjavapagainstthe
Xamarin.AndroidX.Compose.Material3Android1.4.0.3 AAR), plus a[ComposeDefaults("ScaffoldDefault", ...)]declarative attribute for the$defaultbitmask.Sample fix
In the same PR, update
src/ComposeNet.Sample/MainActivity.csto wrap theexisting per-tab content in a
Scaffoldand move theNavigationBartothe
BottomBarslot, e.g.:That makes the bottom bar look correct on the emulator (pinned to the
bottom edge above the system nav bar) and gives the sample a more
realistic Material 3 shape.
References
AlertDialogtemplate (slot-property facade pattern)NavigationBar, currently mis-positioned in the sampleScaffolddocs:https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#Scaffold