Question

我在屏幕顶部有一个选项卡布局，在屏幕底部有底部导航视图。

我需要在中间有一个容器并交换视图，这类似于Android中的片段事务。

如何在Flutter中实现这一目标？

    home: DefaultTabController(
      length: prefList.length,
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: const Color(0xff00234a),
          bottom: TabBar(
            tabs: tabList,
            isScrollable: true,
            indicatorColor: const Color(0xffffffff),
          ),
          title: Text('Test Demo'),
          centerTitle: true,
        ),
        body: Container(
          child: TabBarView(
            children: tabList,
            controller: controller,
          ),
        ),
        // Set the bottom navigation bar
        bottomNavigationBar: Material(
          // set the color of the bottom navigation bar
          color: const Color(0xff00234a),
          // set the tab bar as the child of bottom navigation bar
          child: TabBar(
            tabs: <Tab>[
              Tab(
                icon: Icon(Icons.favorite),
              ),
              Tab(
                icon: Icon(Icons.adb),
              ),
              Tab(
                icon: Icon(Icons.airplay),
              ),
              Tab(
                icon: Icon(Icons.gamepad),
              ),
              Tab(
                icon: Icon(Icons.videogame_asset),
              ),
            ],
            // setup the controller
            controller: controller,
          ),
        ),
      ),
    ),
  );
}

我需要用Android中的Container布局替换TabView小部件，该容器用于替换不同的片段！

Answer 1

从颤抖起，您可以使用此功能实现最简单的导航

public async Task<IActionResult> RegisterAgencyUser([FromBody] Models.Request.RegisterAgencyUserRequest request)
{
    JsonContentResult jsonContentResult = new JsonContentResult();
    if (!ModelState.IsValid)
    {
        return BadRequest(ModelState);
    }

    if (string.IsNullOrEmpty(request.InvitationCode) || string.IsNullOrWhiteSpace(request.InvitationCode))
        return Json(new SharedResponse(AppConstants.ServiceReponses.Error, "A user can't be registered without invitation"));

    var invitationDetails = _inviteRepository.GetInvitaionCodeDetails(request.InvitationCode);

    if (invitationDetails.Type != (int)InviteType.Agency)
    {
        return Json(new SharedResponse(AppConstants.ServiceReponses.Error, "Invalid invitation code"));
    }

    //...

用于选项卡式屏幕

    int _selectedIndex = 0;
static const TextStyle optionStyle = TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static const List<Widget> _widgetOptions = <Widget>[
  Text(
    'Index 0: Home',
    style: optionStyle,
  ),
  Text(
     'Index 1: Business',
     style: optionStyle,
  ),
  Text(
     'Index 2: School',
     style: optionStyle,
  ),
];

void _onItemTapped(int index) {
  setState(() {
    _selectedIndex = index;
  });
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('BottomNavigationBar Sample'),
    ),
    body: Center(
      child: _widgetOptions.elementAt(_selectedIndex),
    ),
    bottomNavigationBar: BottomNavigationBar(
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          title: Text('Home'),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.business),
          title: Text('Business'),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.school),
          title: Text('School'),
        ),
      ],
      currentIndex: _selectedIndex,
      selectedItemColor: Colors.amber[800],
      onTap: _onItemTapped,
    ),
  );
}

如何在Flutter中实现碎片交易？

1 个答案: