Die Anleitung zu Flutter SimpleDialog

SimpleDialog
Examples
title
titlePadding
titleTextStyle
children
contentPadding
backgroundColor
elevation
semanticLabel
shape

1. SimpleDialog

Die Klasse SimpleDialog wird verwendet, um ein einfaches Dialogfeld zu erstellen, das aus einem Titel und einer Liste von Optionen besteht, in denen der Benutzer eine Option aus der Liste auswählen kann. Jede Option ist normalerweise ein Objekt SimpleDialogOption.

Wenn Sie möchten, dass ein Dialogfeld dem Benutzer eine Nachricht sendet, berücksichtigen Sie die Klasse AlertDialog.

Die Anleitung zu Flutter AlertDialog

SimpleDialog Constructor:

SimpleDialog Constructor

const SimpleDialog(
    {Key key,
    Widget title,
    EdgeInsetsGeometry titlePadding: const EdgeInsets.fromLTRB(24.0, 24.0, 24.0, 0.0),
    TextStyle titleTextStyle,
    List<Widget> children,
    EdgeInsetsGeometry contentPadding: const EdgeInsets.fromLTRB(0.0, 12.0, 0.0, 16.0),
    Color backgroundColor,
    double elevation,
    String semanticLabel,
    ShapeBorder shape}
)

2. Examples

Zum ersten schauen wir uns ein einfaches aber vollständiges Beispiel für den SimpleDialog. Es hilft Ihnen bei der Beanwortung der folgenden grundlegenden Fragen:

So erstellen Sie einem SimpleDialog.
So fügen Sie die Optionslisten in SimpleDialog hinzu.
So geben Sie die Option des Benutzers zurück.
Umgang mit dem zurückgegebenen Wert.

main.dart (ex1)

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'o7planning.org',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return MyHomePageState();
  }
}

class MyHomePageState extends State<MyHomePage> {
  ProgrammingLanguage selectedLanguage;

  @override
  Widget build(BuildContext context) {
    return Scaffold (
        appBar: AppBar(
            title: Text("Flutter SimpleDialog Example")
        ),
        body: Center (
            child: Column (
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  ElevatedButton (
                    child: Text("Select a Language"),
                    onPressed: () {
                      showMyAlertDialog(context);
                    },
                  ),
                  SizedBox(width:5, height:5),
                  Text("Selected Language: "
                      + (this.selectedLanguage == null ? '?': this.selectedLanguage.name))
                ]
            )
        )
    );
  }

  showMyAlertDialog(BuildContext context) {
    var javascript = ProgrammingLanguage("Javascript", 67.7);
    var htmlCss = ProgrammingLanguage("HTML/CSS", 63.1);
    var sql = ProgrammingLanguage("SQL", 57.4);

    // Create SimpleDialog
    SimpleDialog dialog = SimpleDialog(
      title: const Text('Select a Language:'),
      children: <Widget>[
        SimpleDialogOption(
            onPressed: () {
              // Close and return value
              Navigator.pop(context, javascript);
            },
            child: Text(javascript.name)
        ),
        SimpleDialogOption(
          onPressed: () {
            // Close and return value
            Navigator.pop(context, htmlCss);
          },
          child:  Text(htmlCss.name),
        ),
        SimpleDialogOption(
          onPressed: () {
            // Close and return value
            Navigator.pop(context, sql);
          },
          child:  Text(sql.name),
        )
      ],
    );

    // Call showDialog function to show dialog.
    Future<ProgrammingLanguage> futureValue = showDialog(
        context: context,
        builder: (BuildContext context) {
          return dialog;
        }
    );

    futureValue.then( (language) => {
      this.setState(() {
        this.selectedLanguage = language;
      })
    });
  }

}

class ProgrammingLanguage {
  String name;
  double percent;

  ProgrammingLanguage(this.name, this.percent) ;
}

3. title

Das Property title ist eine Option zum Festlegen des Titels für den SimpleDialog. In den meisten Anwendungsfällen handelt es sich um ein Objekt Text.

Widget title

Zum Beispiel:

title (ex1)

void showMyAlertDialog(BuildContext context) {
  var javascript = ProgrammingLanguage("Javascript", 67.7);
  var htmlCss = ProgrammingLanguage("HTML/CSS", 63.1);
  var sql = ProgrammingLanguage("SQL", 57.4);

  // Create SimpleDialog
  SimpleDialog dialog = SimpleDialog(
    title:  Row (
       children: [
         Icon(Icons.code, color:Colors.blue),
         SizedBox(width:5, height:5),
         Text('Select a Language:'),
       ]
    ),
    children: <Widget>[
      SimpleDialogOption(
          onPressed: () {
            // Close and return value
            Navigator.pop(context, javascript);
          },
          child: Text(javascript.name)
      ),
      SimpleDialogOption(
        onPressed: () {
          // Close and return value
          Navigator.pop(context, htmlCss);
        },
        child:  Text(htmlCss.name),
      ),
      SimpleDialogOption(
        onPressed: () {
          // Close and return value
          Navigator.pop(context, sql);
        },
        child:  Text(sql.name),
      )
    ],
  );;

  // Call showDialog function to show dialog.
  Future<ProgrammingLanguage> futureValue = showDialog(
      context: context,
      builder: (BuildContext context) {
        return dialog;
      }
  );

  futureValue.then( (language) => {
    this.setState(() {
      this.selectedLanguage = language;
    })
  });
}

4. titlePadding

Das Property titlePadding wird verwendet, um den Titel von SimpleDialog mit einem Padding zu versehen. Wenn der titlenull ist, wird das titlePadding nicht verwendet.

Standardmäßig bietet das titlePadding 24 pixel oben, links und rechts vom Titel und 0 Pixel unten im Titel.

EdgeInsetsGeometry titlePadding: const EdgeInsets.fromLTRB(24.0, 24.0, 24.0, 0.0),

Die Anleitung zu Flutter EdgeInsetsGeometry

Zum Beispiel:

titlePadding (ex1)

titlePadding: EdgeInsets.fromLTRB(24, 24, 24, 50)

5. titleTextStyle

Das Property titleTextStyle wird verwendet, um den Textstil des Bereichs title zu definieren.

TextStyle titleTextStyle

Die Anleitung zu Flutter TextStyle

titleTextStyle (ex1)

titleTextStyle: TextStyle(
    color: Colors.red,
    fontSize: 24
)

6. children

Das Property children ist eine Option, die eine Optionsliste von SimpleDialog definiert. Insbesondere ist dies die Liste der SimpleDialogOption, die in einem ListBody platziert und ListBody wird in einem SingleChildScrollView platziert.

List<Widget> children

main.dart (children ex1)

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'o7planning.org',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return MyHomePageState();
  }
}

class MyHomePageState extends State<MyHomePage> {
  ProgrammingLanguage selectedLanguage;

  @override
  Widget build(BuildContext context) {
    return Scaffold (
        appBar: AppBar(
            title: Text("Flutter SimpleDialog Example")
        ),
        body: Center (
            child: Column (
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  ElevatedButton (
                    child: Text("Select a Language"),
                    onPressed: () {
                      showMyAlertDialog(context);
                    },
                  ),
                  SizedBox(width:5, height:5),
                  Text("Selected Language: "
                      + (this.selectedLanguage == null ? '?': this.selectedLanguage.name))
                ]
            )
        )
    );
  }

  void showMyAlertDialog(BuildContext context) {
    var languages = [
      ProgrammingLanguage("Javascript", 67.7),
      ProgrammingLanguage("HTML/CSS", 63.1),
      ProgrammingLanguage("SQL", 57.4),
      ProgrammingLanguage("Python", 44.1),
      ProgrammingLanguage("Java", 40.2),
      ProgrammingLanguage("Bash/Shell/PowerShell", 33.1),
      ProgrammingLanguage("C#", 31.4),
      ProgrammingLanguage("PHP", 26.2),
      ProgrammingLanguage("Typescript", 25.4),
      ProgrammingLanguage("C++", 23.9),
      ProgrammingLanguage("C", 21.8),
      ProgrammingLanguage("Go", 8.8)
    ];

    // A List of SimpleDialogOption(s).
    var itemList = languages.map( (lang) => SimpleDialogOption(
        onPressed: () {
          // Close and return value
          Navigator.pop(context, lang);
        },
        child: Row (
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(lang.name),
              Text (
                  lang.percent.toString(),
                  style: TextStyle(color: Colors.red)
              )
            ]
        )
    )).toList();


    // Create SimpleDialog
    SimpleDialog dialog = SimpleDialog(
        title: Text('Select a Language:'),
        children: itemList
    );

    // Call showDialog function to show dialog.
    Future<ProgrammingLanguage> futureValue = showDialog(
        context: context,
        builder: (BuildContext context) {
          return dialog;
        }
    );

    futureValue.then( (language) => {
      this.setState(() {
        this.selectedLanguage = language;
      })
    });
  }

}

class ProgrammingLanguage {
  String name;
  double percent;

  ProgrammingLanguage(this.name, this.percent) ;
}

Die Anleitung zu Flutter SingleChildScrollView

7. contentPadding

Das Property contentPadding wird verwendet, um den Inhaltsbereich vom SimpleDialog zu füllen.

Standardmäßig bietet contentPadding 16 pixel am unteren Rand des Inhalt und 12 pixel am oberen Rand des Inhalts. Wenn der titlenull ist, wird das Padding top um 12 Pixel erweitert.

EdgeInsetsGeometry contentPadding: const EdgeInsets.fromLTRB(0.0, 12.0, 0.0, 16.0)

Die Anleitung zu Flutter EdgeInsetsGeometry

Zum Beispiel:

contentPadding (ex1)

contentPadding: EdgeInsets.fromLTRB(0, 50, 0, 24)

8. backgroundColor

Mit dem Property backgroundColor wird die Hintergrundsfarbe vom SimpleDialog angegeben.

Color backgroundColor

Zum Beispiel:

backgroundColor: Colors.lightBlueAccent[100]

9. elevation

Das Property elevation definiert die Achse Z vom SimpleDialog. Der Standardwert beträgt 24.0 Pixel.

double elevation

10. semanticLabel

semanticLabel ist ein beschreibender Text vom SimpleDialog, der auf der Benutzeroberfläche nicht sichtbar ist. Wenn der Benutzer den SimpleDialog öffnet und schließt, liest das System dem Benutzer diese Beschreibung vor, wenn der Eingabehilfenmodus (accessibility mode) aktiviert ist.

String semanticLabel

11. shape

Das Property shape wird die Umrissform für SimpleDialog definiert.Der Standardwert von shape ist RoundedRectangleBorder mit einem Radius von 4.0 Pixel an allen vier Ecken.

ShapeBorder shape

Die Anleitung zu Flutter ShapeBorder

RoundedRectangleBorder:

shape (ex1)

shape: RoundedRectangleBorder (
    side:  BorderSide(color: Colors.blueGrey, width: 3),
    borderRadius: BorderRadius.all(Radius.circular(15))
)

BeveledRectangleBorder:

shape (ex2)

shape: BeveledRectangleBorder (
    side:  BorderSide(color: Colors.blueGrey, width: 2),
    borderRadius: BorderRadius.all(Radius.circular(15))
)

Die Anleitung zu Flutter SimpleDialog

1. SimpleDialog

2. Examples

3. title

4. titlePadding

5. titleTextStyle

6. children

7. contentPadding

8. backgroundColor

9. elevation

10. semanticLabel

11. shape

Anleitungen Flutter

Anleitungen Flutter

Neueste Artikel