如何在Flutter中使用Border包装小部件的内容？

Question

我如何使小部件包装内容。 例如，在我的情况下，我希望边框仅围绕小部件的内容而不是整个页面。 我尝试了Expanded，Container，FittedBox，但无法正常工作。 我必须说我是Flutter的新手，并希望在此主题上获得任何帮助。

我将提供一张有关它现在外观的图片。

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();
            });
          })
    ],
  );