Flutter AppBar 前导文本

Question

我想在我的 AppBar 前导：Icon(Icons.settings) 到 ==> Text('Settings'),

当我只做 leading: Text('Cancel', style: TextStyle(fontSize: 20)),

也需要这样下去

基本上我想让引导成为文本而不是图标，这可能吗？

Answer 1

通常，您可以在 AppBar 构造函数的 leading 参数中放入您想要的任何小部件。如果您想将 Icon(Icons.settings) 换成 Text('Settings')，就这样做吧！如果 'Settings' 文本分成两部分，通过设置适当的 leadingWidth 值进行调整。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'Flutter Demo',
        theme: new ThemeData(
            primarySwatch: Colors.orange,
            accentColor: Colors.blue,
            textTheme: TextTheme(title: TextStyle(color: Colors.white))),
        home: Scaffold(
            appBar: AppBar(
          leadingWidth: 75, //TODO Adjust leading container width
          leading: Center(
              child: Text(
            'Settings',
            style: TextStyle(fontSize: 12, fontWeight: FontWeight.bold),
          )),
        )));
  }
}

我添加了 Center 小部件和 TextStyle 以获得更好的体验。

Flutter AppBar 前导文本

Flutter AppBar Leading Text

appbar

ios

flutter

flutter-layout