flutter:有没有一种简单的方法来布局我的应用程序栏

Question

我是新手，所以请耐心等待。当我实现app bar时，有时它只有一个标题，有时它在bar的左侧有一个标题和返回按钮，有时它还会在bar的右侧添加另一个按钮。我不得不用不同的布局来适应不同的情况，这很麻烦。有没有一个方便的小部件提供了三个可选属性，允许我设置title、left button和right button或任何好的布局策略？我所做的如下。

AppBar(
backgroundColor: Colors.gray,
elevation: 0.0,
title: Container(
alignment: Alignment.bottomCenter,
child: Container(
margin: EdgeInsets.only(bottom: ScreenUtil.dp(11)),
height: ScreenUtil.dp(22),
width: ScreenUtil.dp(160),
child: Text(
'title',
style: TextStyle(
fontSize: ScreenUtil.sp(17), fontFamily: FontFamily.family, color: Colors.black, fontWeight: FontWeight.w600
)
),
alignment: Alignment.center,
),
),
),
),
```

Answer 1

您应该了解更多关于Appbar的信息，以及其他属性，以帮助您完成所需的操作，如引导、尾随

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
/// This is the main application widget.
class MyApp extends StatelessWidget {
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: _title,
home: MyStatelessWidget(),
);
}
}
final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
final SnackBar snackBar = const SnackBar(content: Text('Showing Snackbar'));
void openPage(BuildContext context) {
Navigator.push(context, MaterialPageRoute(
builder: (BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Next page'),
),
body: const Center(
child: Text(
'This is the next page',
style: TextStyle(fontSize: 24),
),
),
);
},
));
}
/// This is the stateless widget that the main application instantiates.
class MyStatelessWidget extends StatelessWidget {
MyStatelessWidget({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
key: scaffoldKey,
appBar: AppBar(
leading: Icon(Icons.navigate_next),
title: const Text('AppBar Demo'),
centerTitle: true,
actions: <Widget>[
IconButton(
icon: const Icon(Icons.add_alert),
tooltip: 'Show Snackbar',
onPressed: () {
scaffoldKey.currentState.showSnackBar(snackBar);
},
),
IconButton(
icon: const Icon(Icons.navigate_next),
tooltip: 'Next page',
onPressed: () {
openPage(context);
},
),
],
),
body: const Center(
child: Text(
'This is the home page',
style: TextStyle(fontSize: 24),
),
),
);
}
}