Skip to content

Bind Scaffold and use it in the sample #12

@jonathanpeppers

Description

@jonathanpeppers

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions