กระพือปีกลบปุ่มย้อนกลับบนแอพบาร์


135

ฉันสงสัยว่าถ้าใครรู้วิธีลบปุ่มย้อนกลับที่ปรากฏบนappBarแอพพลิเคชั่นในแอพพลิเคชั่นเมื่อคุณใช้Navigator.pushNamedเพื่อไปที่หน้าอื่น เหตุผลที่ฉันไม่ต้องการให้อยู่ในหน้าผลลัพธ์นี้คือมันมาจากการนำทางและฉันต้องการให้ผู้ใช้ใช้logoutปุ่มแทนเพื่อให้เซสชันเริ่มต้นใหม่

คำตอบ:


159

คุณสามารถลบปุ่มย้อนกลับได้โดยส่งว่างnew Container()เป็นleadingอาร์กิวเมนต์ไปยังAppBarไฟล์.

หากคุณพบว่าตัวเองกำลังทำเช่นนี้คุณอาจไม่ต้องการให้ผู้ใช้สามารถกดปุ่มย้อนกลับของอุปกรณ์เพื่อกลับไปยังเส้นทางก่อนหน้านี้ แทนที่จะโทรpushNamedลองโทรNavigator.pushReplacementNamedเพื่อทำให้เส้นทางก่อนหน้านี้หายไป

ฟังก์ชันpushReplacementNamedจะลบเส้นทางก่อนหน้านี้ในแบ็คสแต็กและแทนที่ด้วยเส้นทางใหม่

ตัวอย่างโค้ดฉบับเต็มสำหรับส่วนหลังอยู่ด้านล่าง

import 'package:flutter/material.dart';

class LogoutPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Logout Page"),
      ),
      body: new Center(
        child: new Text('You have been logged out'),
      ),
    );
  }

}
class MyHomePage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Remove Back Button"),
      ),
      floatingActionButton: new FloatingActionButton(
        child: new Icon(Icons.fullscreen_exit),
        onPressed: () {
          Navigator.pushReplacementNamed(context, "/logout");
        },
      ),
    );
  }
}

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      home: new MyHomePage(),
      routes: {
        "/logout": (_) => new LogoutPage(),
      },
    );
  }
}

ใช่ฉันได้รับคำสั่งของฉันผสม ฉันจะลองดูขอบคุณสำหรับความช่วยเหลือของคุณ
Robert

2
@Collin, pushReplacementNamed ดูเหมือนจะไม่ลบความเป็นไปได้ในการย้อนกลับด้วยลูกศรย้อนกลับของระบบ
Jackpap

@ คอลลินแจ็คสันpushReplacementNamed()ทิ้งวิดเจ็ตหน้าจอก่อนหน้านี้ (และทั้งหมดขึ้นอยู่กับข้อมูลและสถานะ) หรือไม่
Dmitriy Blokhin

@Jackpap นั่นเป็นเพราะมันแสดงลูกศรจริงๆหากมีเส้นทางก่อนหน้านี้ หากเป็นเส้นทางเดียวก็ไม่มีอะไรให้กลับไป ในกรณีของคุณให้ใช้เมธอด Container () ว่าง
ThinkDigital

1
วิธีการคอนเทนเนอร์ว่างดูเหมือนจะทำให้เกิดช่องว่างที่ปุ่มย้อนกลับจะเป็นดังนั้นชื่อ Appbar จะถูกย้ายไปเล็กน้อย ยังไม่ใช่วิธีที่เหมาะ
Hasen

327

ฉันเชื่อว่าแนวทางแก้ไขมีดังต่อไปนี้

จริงๆแล้วคุณ:

  • ไม่ต้องการแสดงปุ่มย้อนกลับที่น่าเกลียด (:]) ดังนั้นไปที่: AppBar(...,automaticallyImplyLeading: false,...);

  • ไม่ต้องการให้ผู้ใช้ย้อนกลับ - แทนที่มุมมองปัจจุบัน - จึงไปหา: Navigator.pushReplacementNamed(## your routename here ##);

  • ไม่ต้องการให้ผู้ใช้ย้อนกลับ - แทนที่มุมมองบางมุมมองกลับในสแต็ก - ดังนั้นจึงใช้: Navigator.pushNamedAndRemoveUntil(## your routename here ##, f(Route<dynamic>)→bool); โดยที่ f คือฟังก์ชันที่ส่งคืนtrueเมื่อพบกับมุมมองสุดท้ายที่คุณต้องการเก็บไว้ในสแต็ก (ก่อนมุมมองใหม่)

  • ไม่ต้องการให้ผู้ใช้ย้อนกลับ - เคย - ล้างเนวิเกเตอร์สแต็กโดยสมบูรณ์ด้วย: Navigator.pushNamedAndRemoveUntil(context, ## your routename here ##, (_) => false);

ไชโย


8
นี่คือคำตอบที่ฉันกำลังมองหา! pushReplacementNamed () ไม่ได้ผลสำหรับฉัน แต่ผู้ใช้กลับไปเรื่อย ๆ คือสิ่งที่ทำงานได้! ขอบคุณ!
s.bridges

1
นี่คือคำตอบที่ดีที่สุด
Jay Jeong

ขอบคุณฉันต้องใช้ "pushReplacementNamed" แทน "popAndPushNamed"
camillo777

นี่ควรเป็นคำตอบที่ทำเครื่องหมายไว้
Bright

1
คำตอบที่ดีที่สุดขอบคุณ @Fabio
Kamlesh

170

วิธีง่ายๆในการลบปุ่มย้อนกลับใน appbar เป็นชุดที่จะautomaticallyImplyLeadingfalse

appBar: AppBar(
  title: Text("App Bar without Back Button"),
  automaticallyImplyLeading: false,
),

ขอบคุณสำหรับวิ
Qutbuddin Bohra

1
แม้ว่าวิธีนี้จะใช้งานง่ายสำหรับสถานการณ์ที่กำหนด แต่Navigator.pushReplacementNamedก็เป็นวิธีแก้ปัญหาที่ถูกต้อง สิ่งที่คุณแนะนำคือวิธีแก้ปัญหาว่าหากนำไปใช้ในทุกสถานการณ์ในที่สุดอาจอนุมานพฤติกรรมที่ไม่ถูกต้องเช่นบางแห่งที่ต้องการให้การAppBarดำเนินต่อไปบ่งบอกถึงพฤติกรรมนำ (เช่นปุ่มนำทางย้อนกลับ)
Guilherme Matuella

แม้ว่าจะลบไอคอนลูกศรย้อนกลับ แต่คุณยังสามารถย้อนกลับได้โดยกดปุ่มย้อนกลับของอุปกรณ์
vishalknishad

ถ้าเพียง แต่ฉันจะอ่านคำตอบเพิ่มเติมอีกหนึ่งคำตอบต่อไปฉันจะได้คำตอบที่แท้จริงของคำถามนี้ ขอบคุณ🙏
Gregory Ray

36

เพียงต้องการเพิ่มคำอธิบายบางส่วนในคำตอบ @Jackpap:

โดยอัตโนมัติ

สิ่งนี้ตรวจสอบว่าเราต้องการใช้วิดเจ็ตด้านหลัง (วิดเจ็ตชั้นนำ) บนแถบแอพหรือไม่ หาก automaticImplyLeading เป็นเท็จช่องว่างจะถูกกำหนดให้กับหัวเรื่องโดยอัตโนมัติและถ้าหากวิดเจ็ตชั้นนำเป็นจริงพารามิเตอร์นี้จะไม่มีผล

void main() {
  runApp(
    new MaterialApp(
      home: new Scaffold(
        appBar: AppBar(
          automaticallyImplyLeading: false, // Used for removing back buttoon. 
          title: new Center(
            child: new Text("Demo App"),
          ),
        ),
        body: new Container(
          child: new Center(
            child: Text("Hello world!"),
          ),
        ),
      ),
    ),
  );
}  

8

ใช้สิ่งนี้สำหรับ Slivers AppBar

SliverAppBar (
        automaticallyImplyLeading: false,
        elevation: 0,
        brightness: Brightness.light,
        backgroundColor: Colors.white,
        pinned: true,
      ),

ใช้สิ่งนี้สำหรับ Appbar ปกติ

 appBar: AppBar(
    title: Text
    ("You decide on the appbar name"
    style: TextStyle(color: Colors.black,), 
    elevation: 0,
    brightness: Brightness.light,
    backgroundColor: Colors.white,
    automaticallyImplyLeading: false,

),

7

// หากคุณต้องการซ่อนปุ่มย้อนกลับให้ใช้รหัสด้านล่าง

class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Text('Remove Back Button'),
    
    //hide back button
    automaticallyImplyLeading: false,
   ),
  body: Center(
    child: Container(),
  ),
);
}
}

// หากคุณต้องการซ่อนปุ่มย้อนกลับและหยุดการดำเนินการป๊อปใช้โค้ดด้านล่าง

class SecondScreen extends StatelessWidget {

@override
Widget build(BuildContext context) {
 return new WillPopScope(

  onWillPop: () async => false,
  child: Scaffold(
    appBar: AppBar(
      title: Text("Second Screen"),
      //For hide back button
      automaticallyImplyLeading: false,
    ),
    body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              child: Text('Back'),
              onPressed: () {
                Navigator.pop(context);
              },
            ),
          ],
        )
    ),
  ),
);
 }


[


5

appbar automaticallyImplyLeadingเครื่องมือที่มีคุณสมบัติที่เรียกว่า trueโดยค่าเริ่มต้นค่าของมันคือ falseหากคุณไม่ต้องการกระพือสร้างปุ่มย้อนกลับให้คุณโดยอัตโนมัติแล้วก็ทำให้ทรัพย์สิน

appBar: AppBar(
  title: Text("YOUR_APPBAR_TITLE"), 
  automaticallyImplyLeading: false,
),

เพื่อเพิ่มปุ่มย้อนกลับที่คุณกำหนดเอง

appBar: AppBar(
  title: Text("YOUR_APPBAR_TITLE"), 
  automaticallyImplyLeading: false,
  leading: YOUR_CUSTOM_WIDGET(),
),

3

หากไปที่หน้าอื่น Navigator.pushReplacement()สามารถใช้ได้. สามารถใช้งานได้หากคุณกำลังนำทางจากการเข้าสู่ระบบไปที่หน้าจอหลัก หรือคุณสามารถใช้.
AppBar(automaticallyImplyLeading: false)


-2
  appBar: new AppBar(title: new Text("SmartDocs SPAY"),backgroundColor: Colors.blueAccent, automaticallyImplyLeading:false,
        leading: new Container(),
      ),

มันทำงานได้ดี


เราจำเป็นต้องให้การชั้นนำ: คอนเทนเนอร์ใหม่ () แท็ก
พระศิวะ
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.