如何强制文本溢出其父容器宽度？

Question

我在

DropdownButtonFormField

中有一个有点长的标签，我需要显示溢出到其父容器之外的整个文本。

我怎样才能实现这一目标？

Container(
    width: MediaQuery.of(context).size.width * 0.30,
    child: new DropdownButtonFormField<String>(
      decoration: InputDecoration(
        labelText: ("Long Text here, which should overflow it's parent"),
        // labelStyle: new TextStyle(
        //   overflow: TextOverflow.visible,
        // ),
        // label: TextField(
        //   //maxLines: 1,
        //   style: TextStyle(overflow: TextOverflow.visible,),
        //   decoration: InputDecoration.collapsed(
        //       hintText: ("Long Text here, which should overflow it's parent"),
        //   ),
        // ),
        // label: Text(
        //   ("Long Text here, which should overflow it's parent"),
        //     overflow: TextOverflow.visible,
        // ),
      ),
      isExpanded:true,
      hint: Text("Select"),
      items: _list.map((value) {
        return new DropdownMenuItem<String>(
          value: value,
          child: new Text(value),
        );
      }).toList(),
      onChanged: (value) {},
    )
),

Answer 1

解决方案1： 增加容器的宽度以占据屏幕的更大部分。您可以通过将其宽度设置为屏幕宽度的百分比来做到这一点：

width: MediaQuery.of(context).size.width * 0.9,

解决方案2：

如果您需要在列中包含多个容器或元素，您可以为每个元素分配特定的宽度。这是一个例子：

Container(
                          width: MediaQuery.of(context).size.width * 0.9,
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(
                                'Long Text here, which should overflow it\'s parent',
                              ),
                              // SizedBox(height: 8),
                              Container(
                                  width: MediaQuery.of(context).size.width *
                                      0.30,
                                  child:
                                      new DropdownButtonFormField<String>(
                                    decoration: InputDecoration(
                                        // labelStyle: new TextStyle(
                                        //   overflow: TextOverflow.visible,
                                        // ),
                                        // label: TextField(
                                        //   //maxLines: 1,
                                        //   style: TextStyle(overflow: TextOverflow.visible,),
                                        //   decoration: InputDecoration.collapsed(
                                        //       hintText: ("[![Long Text here, which should overflow it's parent][1]][1]"),
                                        //   ),
                                        // ),
                                        // label: Text(
                                        //   ("Long Text here, which should overflow it's parent"),
                                        //     overflow: TextOverflow.visible,
                                        // ),
                                        ),
                                    isExpanded: true,
                                    hint: Text("Select"),
                                    items: _list.map((value) {
                                      return new DropdownMenuItem<String>(
                                        value: value,
                                        child: new Text(value),
                                      );
                                    }).toList(),
                                    onChanged: (value) {},
                                  )),