Ramedlaw Vocinnas Asked:2020-03-01 17:31:40 +0800 CST2020-03-01 17:31:40 +0800 CST 2020-03-01 17:31:40 +0800 CST 如何像在 VKontakte 上一样在 AppBar 中制作标签? 772 如何使用 Flutter 在 AppBar 中制作这样的选项卡? android 1 个回答 Voted Best Answer MiT 2020-03-01T18:01:13+08:002020-03-01T18:01:13+08:00 您可以这样做(在Dartpad'e中您可以尝试): import 'package:flutter/material.dart'; void main() { runApp(TabbedAppBarSample()); } class TabbedAppBarSample extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: DefaultTabController( length: choices.length, child: Scaffold( appBar: AppBar( title: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ IconButton( icon: Icon(Icons.camera_alt), onPressed: () {}, ), TabBar( isScrollable: true, tabs: choices.map((Choice choice) { return Tab( text: choice.title, ); }).toList(), ), IconButton( icon: Icon(Icons.add_alert), onPressed: () {}, ), ], ), ), body: TabBarView( children: choices.map((Choice choice) { return Padding( padding: const EdgeInsets.all(16.0), child: ChoiceCard(choice: choice), ); }).toList(), ), ), ), ); } } class Choice { const Choice({this.title, this.icon}); final String title; final IconData icon; } const List<Choice> choices = const <Choice>[ const Choice(title: 'CAR', icon: Icons.directions_car), const Choice(title: 'BICYCLE', icon: Icons.directions_bike), const Choice(title: 'BOAT', icon: Icons.directions_boat), const Choice(title: 'BUS', icon: Icons.directions_bus), const Choice(title: 'TRAIN', icon: Icons.directions_railway), const Choice(title: 'WALK', icon: Icons.directions_walk), ]; class ChoiceCard extends StatelessWidget { const ChoiceCard({Key key, this.choice}) : super(key: key); final Choice choice; @override Widget build(BuildContext context) { return Card( color: Colors.white, child: Center( child: Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ Icon(choice.icon, size: 128.0), Text(choice.title), ], ), ), ); } }
您可以这样做(在Dartpad'e中您可以尝试):