如何将开关移到右上角？

Question

import 'dart:html';

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool switcht1 = false;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter - tutorialkart.com'),
        ),
        body: Column(
          children: [
            Container(
              width: double.infinity,
              height: 50,
              color: Colors.amber,
              child: Text("Water"),
              padding: EdgeInsets.only(top: 15),
            ),
            Switch(
              value: switcht1,
              onChanged: (value) {
                setState(() {
                  switcht1 = value;
                  print(switcht1);
                });
              },
              activeTrackColor: Colors.lightGreenAccent,
              activeColor: Colors.green,
            ),
          ],
        ),
      ),
    );
  }
}

我是 Flutter 新手。我还不太熟悉列和行的概念，但我正在研究它。当我想将开关放在一列中时，它会保持在外面。怎么才能像图片那样移动开关呢？

Answer 1

如您所知，Column() 小部件用于垂直排列多个小部件，Row() 小部件用于水平排列。

要实现布局，您需要使用 Row() 包装小部件并在两个小部件之间创建 space，您需要 mainAxisAlignment 属性.

示例如下：

Row(
   mainAxisAlignment: MainAxisAlignment.spaceBetween,
   children: [
      Text("Water"),
      Switch(),
   ],
),

Answer 2

在这种情况下，您必须像这样使用行小部件：

Column(
      children: [
        Container(
          height: 50,
          color: Colors.amber,
          child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text("Water"),
                Switch(
                  value: switcht1 ,
                  onChanged: (bool value) {
                    setState(() {
                      switcht1 = value;
                      print(switcht1);
                    });
                  },
                  activeTrackColor: Colors.lightGreenAccent,
                  activeColor: Colors.green,
                ),
              ]
          ),
          padding: EdgeInsets.only(top: 15),
        ),

      ],
    ),

结果：

或使用 ListTile :

Column(
      children: [
        Container(
          height: 50,
          color: Colors.amber,
          child: ListTile(
              leading: Text("Water"),
              trailing : Switch(
              value: switcht1 ,
              onChanged: (bool value) {
                setState(() {
                  switcht1 = value;
                  print(switcht1);
                });
              },
              activeTrackColor: Colors.lightGreenAccent,
              activeColor: Colors.green,
            ),
          ),
          padding: EdgeInsets.only(top: 15),
        ),

      ],
    ),

结果

如何将开关移到右上角？

How can I move the switch to the top right?

android

dart

flutter

flutter-layout

flutter-web