dart Flutter:如何使容器大小的儿童

avkwfej4  于 2023-09-28  发布在  Flutter
关注(0)|答案(3)|浏览(107)

根据定义,包含子项的容器将增长到足以显示它们。在我正在开发的这个例子中,我无法使容器适合孩子的大小,我必须硬编码重量和高度,否则容器会消失(是一个红色背景,我把整个代码,所以你可以复制粘贴,但它只是一个,我不能控制的行为)。

import 'package:flutter/material.dart';
import 'package:littlebusiness/logic/Category.dart';
import 'package:hive/hive.dart';

class FormCategoryPage extends StatefulWidget {
  @override
  _FormCategoryPageState createState() => _FormCategoryPageState();
}

class _FormCategoryPageState extends State<FormCategoryPage> {
  final _formKey = GlobalKey<FormState>();

  List<RadioModel> sampleData = new List<RadioModel>();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    sampleData.add(new RadioModel(true, 'A', 0xffe6194B));
    sampleData.add(new RadioModel(false, 'B', 0xfff58231));
    sampleData.add(new RadioModel(false, 'C', 0xffffe119));
    sampleData.add(new RadioModel(false, 'D', 0xffbfef45));
    sampleData.add(new RadioModel(true, 'A', 0xffe6194B));
    sampleData.add(new RadioModel(false, 'B', 0xfff58231));
  }

  String _name;

  Color _color;

  String _selectedValue;

  void addCategory(Category cat) {
    Hive.box('categories').add(cat);
  }

  void getColor(String value) {
    _selectedValue = value;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('PERFORMANCE'),
      ),
      body: Center(
        child: Form(
          key: _formKey,
          child: Padding(
            padding: EdgeInsets.all(16.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                TextFormField(
                  decoration: const InputDecoration(
//                  hintText: 'Enter your email',
                    labelText: 'Name',
                  ),
                  onSaved: (value) => _name = value,
                  validator: (value) {
                    if (value.isEmpty) {
                      return 'Please enter some text';
                    }
                    return null;
                  },
                ),
                SizedBox(
                  height: 20,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Container(
                      height: 100,
                      width: 320,
                      color: Colors.red,
                      child: ListView.builder(
                        scrollDirection: Axis.horizontal,
                        itemCount: sampleData.length,
                        itemBuilder: (BuildContext context, int index) {
                          return InkWell(
                            onTap: () {
                              setState(() {
                                sampleData.forEach(
                                    (element) => element.isSelected = false);
                                sampleData[index].isSelected = true;
                              });
                            },
                            child: RadioItem(sampleData[index]),
                          );
                        },
                      ),
                    ),
                  ],
                ),
                RaisedButton(
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(18.0),
                      side: BorderSide(color: Colors.red)),
                  child: Text('Add New Contact'),
                  color: Colors.teal,
                  textColor: Colors.white,
                  onPressed: () {
                    _formKey.currentState.save();
//                  final newContact = Contact(_name, int.parse(_age));
//                  addContact(newContact);
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class RadioItem extends StatelessWidget {
  final RadioModel _item;
  RadioItem(this._item);
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(15.0),
      child: Column(
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
          Container(
            height: 35.0,
            width: 35.0,
            alignment: Alignment.center,
            child: Container(
                height: 25.0,
                width: 25.0,
                decoration: BoxDecoration(
                  color: Color(_item.colorCode),
                  borderRadius:
                      const BorderRadius.all(const Radius.circular(15)),
                )),
            decoration: BoxDecoration(
              color: Colors.transparent,
              border: Border.all(
                  width: 3.0,
                  color: _item.isSelected
                      ? Color(_item.colorCode)
                      : Colors.transparent),
              borderRadius: const BorderRadius.all(const Radius.circular(25)),
            ),
          ),
          Container(margin: EdgeInsets.only(left: 20.0))
        ],
      ),
    );
  }
}

class RadioModel {
  bool isSelected;
  final String buttonText;
  final int colorCode;
  RadioModel(this.isSelected, this.buttonText, this.colorCode);
}

这是实际结果:

有人知道为什么会这样吗?我迷失了,给一个双倍的。无穷大不起作用。。谢谢你,谢谢

zf2sa74q

zf2sa74q1#

与使用固定值的wisth和height不同,您可以使用
MediaQuery.of(context).size.width,MediaQuery.of(context).size.height
你也可以使用它们,
MediaQuery.of(context).size.width * 0.5表示设备屏幕的50%
希望它能帮助

nmpmafwu

nmpmafwu2#

您必须同时指定宽度和高度,因为您的列表视图是ColumnRow的子视图
您可以将Listview替换为SingleChildScrollView中的RadioItemRow

Container(
  color: Colors.red,
  child: Builder(
    builder: (context) {
      var childs = <Widget>[];
      for (var item in sampleData) {
        childs.add(RadioItem(item));
      }
      return SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Row(
          children: childs,
        ),
      );
    },
  ),
),
zxlwwiss

zxlwwiss3#

使用固有高度/固有宽度:

IntrinsicHeight(
  child: Container(
    child: // children
  ),
)
IntrinsicWidth
  child: Container(
    child: // children
  ),
)

相关问题