flutter - 将切换按钮扩展到父容器宽度

标签 flutter dart

有什么方法可以 动态 将切换按钮扩展到父容器宽度,而无需进行任何硬编码。我找到了一个使用 MediaQuery 上下文的答案,该答案仅适用于全屏宽度。我还尝试将按钮包装在展开的小部件中,但这会引发错误

Container(
  width: 150.0, // hardcoded for testing purpose 
  child: ToggleButtons(
    constraints:
        BoxConstraints.expand(width: MediaQuery.of(context).size.width), // this doesn't work once inside container unless hard coding it
    borderRadius: BorderRadius.circular(5),
    children: [
      ShapeToggleButton(
        text: 'Option1',
      ),
      ShapeToggleButton(
        text: 'Option2',
      ),
    ],
    isSelected: [true, false],
    onPressed: (index) {},
  ),
);

最佳答案

正如 psink 在上面的评论中所建议的,答案是将它包装在 LayoutBuilder 中

        Container(
              width: 150.0, // hardcoded for testing purpose
              child: LayoutBuilder(builder: (context, constraints) {
        return ToggleButtons(
          renderBorder: false,
          constraints:
              BoxConstraints.expand(width: constraints.maxWidth / 2), //number 2 is number of toggle buttons
          borderRadius: BorderRadius.circular(5),
          children: [
            Text(
              'Option1',
            ),
            Text(
              'Option2',
            ),
          ],
          isSelected: [true, false],
          onPressed: (index) {},
        );
      })))

关于flutter - 将切换按钮扩展到父容器宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60456821/

相关文章:

Flutter Provider "notifyListener()"不改变状态

android - 函数的返回类型为 'Future<Station>',但没有以return语句flutter结尾

flutter - RangeError(索引): Invalid value: Not in range 0. .8,包括 : 9 in Gridview. 计数

datatable - Flutter:有没有办法在 "fix size"中获取 DataColumn 的/"reduce size" "DataTable"?

android - 具有FAB风格的自定义按钮

android - 配置根项目 'imagepicker'时发生问题:找不到SDK

Flutter:Hero widget、Navigation 2.0 和 Provider 不能一起正常工作

dart - 如何捕获 dart 聚合物应用程序中所有 Uncaught Error ?

flutter - 对话框中按按钮时文本未更新

android - 在适当的外部 map 应用程序中打开 KML/GPX 文件