flutter - 如何在 Flutter 中根据子 Text 小部件包装 Row

Question

我在 SafeArea 的脚手架内有这段代码：

Column(
children: [Flexible(
        fit: FlexFit.loose,
        child: Container(
          // width: 130,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [Icon(Icons.ac_unit), Text("Trending")],
          ),
          padding: EdgeInsets.all(10),
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20),
              color: Colors.grey[300]),
        ),
      )]
)

这给出了以下结果：

我想要实现的是：

如何使行在文本周围扭曲。

标签： flutterflutter-layout

Answer 1

从文档

Wrap(
  spacing: 8.0, // gap between adjacent chips
  runSpacing: 4.0, // gap between lines
  children: <Widget>[
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('AH')),
      label: Text('Hamilton'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('ML')),
      label: Text('Lafayette'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('HM')),
      label: Text('Mulligan'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('JL')),
      label: Text('Laurens'),
    ),
  ],
)

如果您想使用该行，只需执行

Row(
mainAxisSize: MainAxisSize.min
  children: [
...
])

用上面的行替换那个 Chip()

编辑：Chip()用类似这样 的自定义小部件替换_buildChip()，它应该可以让您更好地控制小部件

import 'package:flutter/material.dart';

main() {
  runApp(MaterialApp(
    home: MyPage(),
  ));
}

class MyPage extends StatelessWidget {
  
  Widget _buildChip() {
    return Container(
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20), color:      Colors.grey.withOpacity(.4) ),
      child: InkWell(
        highlightColor: Colors.blue.withOpacity(.4),
                splashColor: Colors.green,
      borderRadius: BorderRadius.circular(20),
      onTap: () {
        
      },
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 15, vertical: 7),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children:[
          Icon(Icons.ac_unit, size: 14),
            SizedBox(width: 10),
            Text("Trending")
        ]),
        
      ),
        ),
      );
  }
  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Wrap(
  spacing: 8.0, // gap between adjacent chips
  runSpacing: 4.0, // gap between lines
  children: <Widget>[
    _buildChip(),
    _buildChip(),
    _buildChip(),
    _buildChip(),
    _buildChip(),
  ],
)
    );
  }
}

让我知道这是否是您想要的，以便我编辑该答案