flutter - 将 Wrap 小部件与文本一起使用

Question

我正在尝试复制这个设计。

SizedBox(
  width: 330.w,
  child: Wrap(
    children: [
      Transform.scale(
        scale: 1.3,
        child: Checkbox(
          value: false,
          side: const BorderSide(width: 1),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(3.r),
          ),
          onChanged: (bool? value) {},
        ),
      ),
      const Text('Nullam quis risus eget urna mollis ...'),
    ],
  ),
)

由于我希望文本自动换行并向下流动，因此我使用了 Wrap 小部件。但是 Text 小部件并不从与复选框相同的级别开始。看起来像这样。

是否有其他方法可以实现这一目标？

Answer 1

您可以尝试RichText、WidgetSpan和TextSpan

有一个代码示例:

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: Container(
            color: Colors.white,
            child: RichText(
              text: TextSpan(
                children: [
                  WidgetSpan(
                    child: SizedBox(
                        height: 20,
                        width: 20,
                        child: Checkbox(
                          value: false,
                          side: const BorderSide(width: 1),
                          onChanged: (bool? value) {},
                        )),
                  ),
                  const TextSpan(
                    text:
                        " Nullam quis risus get urna mollis ornare vel eu leo. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Done ullamcorper nulla non metus auctor fringilla.",
                  ),
                ],
              ),
            )));
  }
}

就像