Flutter - 使列/小部件可变宽度与其他固定？答案

【问题标题】：Flutter - Making a column / widget variable width with others fixed?Flutter - 使列/小部件可变宽度与其他固定？
【发布时间】：2021-06-16 02:06:28
【问题描述】：

我有一个颤振应用程序，其中包含 2 个（以及更多）需要有一个由固定宽度项目包围的“可变宽度”元素；例如作为一个数据表（我希望名称在屏幕旋转时增长/缩小，但其他的都是固定的）：

  SingleChildScrollView dataBody() {
    return SingleChildScrollView(
      scrollDirection: Axis.vertical,
      child: DataTable(
        showCheckboxColumn: false,
        sortAscending: sort,
        sortColumnIndex: 0,
        columns: [
          DataColumn(
              label: Text("Name"),
              numeric: false,
              tooltip: "Device Name",
              onSort: (columnIndex, ascending) {
                setState(() {
                  sort = !sort;
                });
                onSortColum(columnIndex, ascending);
              }),
          DataColumn(
              label: Text("RSSI"),
              numeric: true,
              tooltip: "Signal Strength",
              onSort: (columnIndex, ascending) {
                setState(() {
                  sort = !sort;
                });
                onSortColum(columnIndex, ascending);
              }),
          DataColumn(
            label: Text("Node"),
            numeric: true,
            tooltip: "Mesh Node",
          ),
          DataColumn(
            label: Text("Status"),
            numeric: false,
            tooltip: "Status",
          ),
        ],

作为 Row() 容器中的 2 个项目（我希望图形是可变宽度的，并且滑块保持固定 - 理想情况下，我希望图形可以调整大小然后滚动滑块的高度始终与图形相对应）：

Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        verticalDirection: VerticalDirection.down,
        children: <Widget>[
          Row(
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[Text('HeaderJunk')]),
          Row(
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                RotatedBox(
                    quarterTurns: -1,
                    child: Slider(
                        value: setpoint * 1.0,
                        max: 900,
                        min: 200,
                        onChanged: (double value) {
                          setState(() {
                            setpoint = value.toInt();
                          });
                        })),
                chartwidget //This is a chart_flutter chart
              ]),

【问题讨论】：

请更清楚您的问题，并提出一件事而不是多个问题。很难理解您的要求

标签： flutter flutter-layout

【解决方案1】：

啊啊！简短的回答是在 Widget 上使用 Expand 容器...（您不能在 Datacolumn 上使用它）。用模拟器测试；结果代码是：

    return SingleChildScrollView(
      scrollDirection: Axis.vertical,
      child: DataTable(
        showCheckboxColumn: false,
        sortAscending: sort,
        sortColumnIndex: 0,
        columns: [
          DataColumn(
              label: Expanded(child: Text("NAME")),//<=== Expand the Label
              numeric: false,
              tooltip: "Device Name",
              onSort: (columnIndex, ascending) {
                setState(() {
                  sort = !sort;
                });
                onSortColum(columnIndex, ascending);
              }),
          DataColumn(
              label: Text("RSSI"),
              numeric: true,
              tooltip: "Signal Strength",
              onSort: (columnIndex, ascending) {
                setState(() {
                  sort = !sort;
                });
                onSortColum(columnIndex, ascending);
              }),
          DataColumn(
            label: Text("Node"),
            numeric: true,
            tooltip: "Mesh Node",
          ),
          DataColumn(
            label: Text("Status"),
            numeric: false,
            tooltip: "Status",
          ),
        ],

和

          Row(
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[Text('Foto-captor description and such')]),
          Row(
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                RotatedBox(
                    quarterTurns: -1,
                    child: Slider(
                        value: setpoint * 1.0,
                        max: 900,
                        min: 200,
                        onChanged: (double value) {
                          setState(() {
                            setpoint = value.toInt();
                          });
                        })),
                Expanded(child: chartwidget)
              ]),

【讨论】：