flutter - 如何在弹出窗口 flutter 中创建按钮列表

Question

我想创建类似图像的东西。我认为它是一个弹出对话框。有可能在 flutter 中实现这一目标吗？怎么做到的？

Answer 1

您可以通过添加基本 AppBar 来执行它们。 AppBar 基本上是一个工具栏，它本身包含小部件，可以为其分配操作和 IconButton。

下面的例子将演示 AppBar 在 Flutter 中的用法。

例子

import 'package:flutter/material.dart'; 
import '../my_route.dart'; 
class BasicAppbarExample extends MyRoute { 
    const BasicAppbarExample( 
          [String sourceFile ='lib/routes/appbar_basic_appbar_ex.dart'])
          : super(sourceFile);
 
    @override 
    get title => 'Basic AppBar'; 
  
    @override 
    get links => { 
    'Doc': 'https://docs.flutter.io/flutter/material/AppBar-class.html', 
  }; 
    
  @override 
    Widget buildMyRouteContent(BuildContext context) {
    return Scaffold( 
      appBar: AppBar(   
        backgroundColor: Colors.redAccent, 
        leading: Icon(Icons.tag_faces), 
        title: Text("Sample title"), 
        // TODO: add actions when items are clicked. 
        actions: <Widget>[ 
          IconButton( 
            icon: Icon(Icons.directions_bike), 
            onPressed: () {}, 
          ), 
          IconButton( 
            icon: Icon(Icons.directions_bus), 
            onPressed: () {},
          ),
          PopupMenuButton( 
            itemBuilder: (BuildContext context) { 
              return [ 
                PopupMenultem(child: Text('Boat')), 
                PopupMenultem(child: Text('Train'))
              ]; 
            },
          )
        ],
      ), 
      body: Center(child: Text("Hello")), 
    );
  }

它会是什么样子？

引用

• Flutter - AppBar class

编辑:您还可以使用其他小部件来包含图像和登录信息(几乎任何您想要的)