Question

如何在Flutter中实现这种布局？

Answer 1

其非常简单的行，其中包含数据

 Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
      Image.asset('Your image link here'),
      Text('you paragraph here')
    ],)

Answer 2

我发布了drop_cap_text 软件包以实现DropCapText，您还可以将图像作为自定义窗口小部件放置在DropCap中。

Answer 3

您可以使用Stack（）：https://flutter.io/docs/development/ui/layout#stack

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    var stack = Stack(
      alignment: const Alignment(0.6, 0.6),
      children: [
        CircleAvatar(
          backgroundImage: AssetImage('images/pic.jpg'),
          radius: 100.0,
        ),
        Container(
          decoration: BoxDecoration(
            color: Colors.black45,
          ),
          child: Text(
            'Mia B',
            style: TextStyle(
              fontSize: 20.0,
              fontWeight: FontWeight.bold,
              color: Colors.white,
            ),
          ),
        ),
      ],
    );
    // ...
  }
}

您可以将Container（）小部件与前景装饰一起使用：

Container(
  child: Text('Hello World'),
  foregroundDecoration: BoxDecoration(
    image: DecorationImage(
      image: NetworkImage('https://www.example.com/images/frame.png'),
      centerSlice: Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),
    ),
  ),

Answer 4

如@jay7n所述，这可以在颤振团队仍在进行实施的同时实施。

这个想法很简单：检测图像的宽度和整个文本大小（将文字计数乘以单个字体大小），然后检查是否有没有足够的空间容纳整个文本，然后将其拆分为两个文本小部件，一个跟随图像，另一个则放置到下一行。所有小部件都包装在Wrap小部件中。我不确定这是正确的方法，但是我认为解决方法是可行的

如何在Flutter中在图像周围浮动文字？

4 个答案: