[英]Flutter app bar layout: action buttons in the same row with tab bar?
假设我想创建一个应用栏,在开始和结束时有两个操作按钮,同时在中间有一个标签栏,都在同一行。 这是我为使标签栏工作而编写的代码:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
highlightColor: Colors.transparent,
splashColor: Colors.transparent,
hoverColor: Colors.transparent,
),
title: 'Flutter Demo',
home: DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
leading: Icon(
Icons.menu,
),
automaticallyImplyLeading: false,
backgroundColor: Colors.white,
flexibleSpace: new Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
TabBar(
indicatorColor: Colors.pink[100],
tabs: [
Tab(text: 'Dogs'),
Tab(text: 'Cats'),
],
labelColor: Colors.black,
), //tabbar
], //chilren on Tabbar
), //new Column
), //appbar
body: TabBarView(
children: [
Center(child: Text('DOGS')),
Center(child: Text('CATS')),
],
),
),
),
);
}
}
预计应用栏,带有两个操作按钮(指示器 position 需要更多工作:
但是,如何在不让标签栏覆盖它们的情况下添加两个操作按钮呢? 也许使用网格?
尝试将标签栏放入标题:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
highlightColor: Colors.transparent,
splashColor: Colors.transparent,
hoverColor: Colors.transparent,
),
title: 'Flutter Demo',
home: DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
leading: Icon(
Icons.menu,
color: Colors.black,
),
actions: [
Icon(
Icons.settings,
color: Colors.black,
),
],
automaticallyImplyLeading: false,
backgroundColor: Colors.white,
title: Padding(
padding: EdgeInsets.only(left: 50, right: 50),
child:TabBar(
indicatorColor: Colors.pink[100],
tabs: [
Tab(text: 'Dogs'),
Tab(text: 'Cats'),
],
labelColor: Colors.black,
),),
), //appbar
body: TabBarView(
children: [
Center(child: Text('DOGS')),
Center(child: Text('CATS')),
],
),
),
),
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.