如何用边框包装小部件的内容？

Question

如何使小部件包装内容。例如，在我的例子中，我希望边框只环绕小部件的内容，而不是整个页面。我尝试过扩展，容器，FittedBox，但是我无法使它工作。我必须说，我是新来的颤栗，并希望在这个问题上的任何帮助。

我会提供一张照片，它现在的样子。

​

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'labeledCheckbox.dart';

class Settings extends StatefulWidget {
  @override
  _SettingsState createState() => _SettingsState();
}

class _SettingsState extends State<Settings> {
  bool _isSelected = true;

  setStartUpPreferences() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    setState(() {
      prefs.setInt("startUpPreference", _isSelected ? 0 : 1);
      //FocusScope.of(context).requestFocus(myFocusNode);
    });
  }

  getSettings() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    setState(() {
      prefs.get("startUpPreference") == 0
          ? _isSelected = true
          : _isSelected = false;
      //FocusScope.of(context).requestFocus(myFocusNode);
    });
  }

  initState() {
    super.initState();
    getSettings();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Settings"),
        backgroundColor: Colors.black,
        centerTitle: true,
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(
          decoration: ShapeDecoration(
              shape: RoundedRectangleBorder(
            side: BorderSide(
                width: 4.0, style: BorderStyle.solid, color: Colors.blueGrey),
            borderRadius: BorderRadius.circular(8.0),
          )),
          child: Column(
            children: [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Center(
                  child: Text(
                    "Which tab should open upon app-startup?",
                    style:
                        TextStyle(fontWeight: FontWeight.bold, fontSize: 18.0),
                  ),
                ),
              ),
              Divider(
                color: Colors.black,
                indent: 10.0,
                endIndent: 10.0,
                thickness: 1.5,
              ),
              LabeledCheckbox(
                  label: 'Notes',
                  padding: const EdgeInsets.symmetric(horizontal: 20.0),
                  value: _isSelected,
                  onChanged: (bool newValue) {
                    setState(() {
                      _isSelected = newValue;
                      setStartUpPreferences();
                    });
                  }),
              LabeledCheckbox(
                  label: 'Todo\'s',
                  padding: const EdgeInsets.symmetric(horizontal: 20.0),
                  value: !_isSelected,
                  onChanged: (bool newValue) {
                    setState(() {
                      _isSelected = !newValue;
                      setStartUpPreferences();
                    });
                  })
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

默认情况下，mainAxisSize的Column小部件被设置为max。您需要将mainAxisSize更改为MainAxisSize.min。

mainAxisSize是什么？

Column的高度由mainAxisSize属性决定。如果mainAxisSize属性是MainAxisSize.max，那么Column的高度就是传入约束的最大高度。如果mainAxisSize属性是MainAxisSize.min，那么Column的高度就是子元素的高度之和(受传入约束的限制)。

我以您的代码为例添加了一个演示：

 Column(
    // set the mainAxisSize to MainAxisSize.min
    mainAxisSize: MainAxisSize.min, // new line
    children: [
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: Center(
          child: Text(
            "Which tab should open upon app-startup?",
            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18.0),
          ),
        ),
      ),

      .....

      LabeledCheckbox(
          label: 'Todo\'s',
          padding: const EdgeInsets.symmetric(horizontal: 20.0),
          value: !_isSelected,
          onChanged: (bool newValue) {
            setState(() {
              _isSelected = !newValue;
              setStartUpPreferences();
            });
          })
    ],
  );