美文网首页
flutter 导航栏返回按钮带图标

flutter 导航栏返回按钮带图标

作者: neobuger | 来源:发表于2020-08-20 16:56 被阅读0次

    提供一种思路吧

    
    import 'package:flutter/material.dart';
    
    class RegisterPages extends StatefulWidget {
      @override
      _RegisterPagesState createState() => _RegisterPagesState();
    }
    
    class _RegisterPagesState extends State<RegisterPages> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            automaticallyImplyLeading: false,
            title: Row(
              children: <Widget>[
                Expanded(
                  flex: 1,
                  child: Stack(
                    alignment: Alignment(-1, -1),
                    children: <Widget>[
                      IconButton(
                        padding: EdgeInsets.only(right: 60),
                        icon: Icon(Icons.arrow_left),
                        color: Colors.black,
                        highlightColor: Colors.transparent,
                        onPressed: () {
                          print("点击返回图标");
                          Navigator.pop(context);
                        },
                      ),
                      FlatButton(
                        padding: EdgeInsets.only(right: 20),
                        highlightColor: Colors.transparent,
                        splashColor: Colors.transparent,
                        child: Text(
                          "返回",
                          style: TextStyle(color: Colors.black),
                        ),
                        onPressed: () {
                          print("点击返回文字");
                          Navigator.pop(context);
                        },
                      )
                    ],
                  ),
                ),
                Expanded(
                    flex: 1,
                    child: Container(
                      alignment: Alignment.center,
                      child: Text(
                        "注册新新用户",
                        style: TextStyle(color: Colors.black, fontSize: 18),
                      ),
                    )),
                Expanded(
                  child: Text(""),
                  flex: 1,
                )
              ],
            ),
            backgroundColor: Colors.white,
          ),
          body: ButtonBar(
            children: <Widget>[
              Icon(Icons.backspace),
              Text("返回", style: TextStyle(color: Colors.black)),
            ],
          ),
        );
      }
    }
    
    

    相关文章

      网友评论

          本文标题:flutter 导航栏返回按钮带图标

          本文链接:https://www.haomeiwen.com/subject/avhejktx.html