如何在弹出式窗口颤动中创建按钮列表

时间:2019-05-19 12:44:51

标签: flutter flutter-layout

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

Sample image

1 个答案:

答案 0 :(得分:1)

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

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

示例

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")), 
    );
  }

看起来如何?

Output Image

参考

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