Die Anleitung zu Flutter RotatedBox

RotatedBox
quarterTurns
child

1. RotatedBox

RotatedBox ist ein widget , dass sein untergeordnetes Element um einige Anzahl der Viertelumdrehungen dreht. Jedes Viertel ist ein Winkel von 90 Grad oder -90 Grad.

RotatedBox Constructor:

RotatedBox Constructor

const RotatedBox(
    {Key key,
    @required int quarterTurns,
    Widget child}
)

Unten sehen Sie ein Beispiel mit RotatedBox, um ein Objekt Text um 90 Grad im Uhrzeigersinn zu drehen (quarterTurns = 1).

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 StatelessWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold (
        appBar: AppBar(
          title: Text("Flutter RotatedBox Example"),
        ),
        body: Center (
            child: RotatedBox (
                quarterTurns: 1,
                child: Text(
                    "Flutter RotatedBox Tutorial",
                    style: TextStyle(fontSize: 25)
                )
            )
        )
    );
  }
}

In diesem weiteren Beispiel drehen Sie das Objekt Text um 90 Grad gegen den Uhrzeigersinn (quarterTurns = -1).

(ex2)

RotatedBox (
    quarterTurns: -1,
    child: Text(
        "Flutter RotatedBox Tutorial",
        style: TextStyle(fontSize: 25)
    )
)

LinearProgressIndicator ist ein horizontaler Fortschrittsbalken, mit dem Sie mit der RotatedBox um 90 Grad drehen können, um einen vertikalen Fortschrittsbalken zu erhalten.

(ex3)

RotatedBox(
    quarterTurns: -1,
    child: SizedBox(
        width: 250,
        height: 25,
        child : LinearProgressIndicator(
          backgroundColor: Colors.cyan[100],
          valueColor: new AlwaysStoppedAnimation<Color>(Colors.green),
        )
    )
)

Die Anleitung zu Flutter Transform

2. quarterTurns

quarterTurns gibt an, wie oft das untergeordnete widget um 90 Grad im Uhrzeigersinn gedreht werden muss. Der Wert von quarterTurns kann ein negativer Integer sein.

@required int quarterTurns

3. child

Widget child

Die Anleitung zu Flutter RotatedBox

1. RotatedBox

2. quarterTurns

3. child

Anleitungen Flutter

Anleitungen Flutter

Neueste Artikel