小编bko*_*ash的帖子

我有一个定位的Text元素,它位于Stack中的Image元素之上.我想将一个简单的背景颜色应用于该Text元素,以便它像文本框一样构成文本框架:

我可以通过在该堆栈中插入一个Container作为另一个定位子项来完成此操作.但是每次文本字符串更改时我都必须重新计算宽度,这是次优的.有没有更好的办法？

var stack = new Stack(
  children: <Widget>[
    new Image.asset ( // background photo
      "assets/texture.jpg",
      fit: ImageFit.cover,
      height: 600.0,
    ),
    new Positioned ( // headline
      child: new Container(
        decoration: new BoxDecoration (
          backgroundColor: Colors.black
        ),
      ),
      left: 0.0,
      bottom: 108.0,
      width: 490.0,
      height: 80.0,
    ),
    new Positioned (
      child: new Text (
        "Lorem ipsum dolor.",
        style: new TextStyle(
          color: Colors.blue[500],
          fontSize: 42.0,
          fontWeight: FontWeight.w900
        )
      ),
      left: 16.0,
      bottom: 128.0,
    )
  ]
);

我有一个简单的图像资源列表,我在屏幕上有一个图像小部件.我使用一个按钮循环浏览它们,使用setState().

const List<String> _photoData = const [
  "assets/generic-cover.jpg",
  "assets/generic-cover2.jpg",
  "assets/generic-cover3.jpg",
  "assets/generic-cover4.jpg",
];

class _MyHomePageState extends State<MyHomePage> {

  int _coverPhoto = 0;

  void _switchCoverPhoto() {
    setState(() {
      _coverPhoto++;
      if (_coverPhoto == _photoData.length) {
         _coverPhoto = 0;
      }
    });
  }

  @override
  Widget build(BuildContext context) {

    return new Scaffold(
      body: new Stack(
        children: <Widget>[
          new Image.asset (
            _photoData[_coverPhoto],
            fit: ImageFit.cover,
            height: 600.0,
          ),
          new Positioned ( // photo toggle button
            child: new IconButton(
              icon: new Icon (Icons.photo),
              onPressed: _switchCoverPhoto,
              color: Colors.white,
            ),
            top: …

我想对Container小部件执行一个非常简单的2D旋转(包含一些其他小部件.)此小部件将围绕中心的单个固定点旋转,没有变形.

我尝试使用transform财产Matrix4.rotationZ,这在一定程度作品-但锚点是在左上角的角落,而不是在中心.是否有一种简单的方法来指定锚点？

此外,是否有更简单的方法来2D旋转这个不需要Matrix4的小部件？

var container = new Container (
  child: new Stack (
    children: [
      new Image.asset ( // background photo
        "assets/texture.jpg",
        fit: ImageFit.cover,
      ),
      new Center (
        child: new Container (
          child: new Text (
            "Lorem ipsum",
            style: new TextStyle(
              color: Colors.white,
              fontSize: 42.0,
              fontWeight: FontWeight.w900
            )
          ),
          decoration: new BoxDecoration (
            backgroundColor: Colors.black,
          ),
          padding: new EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 16.0),
          transform: new Matrix4.rotationZ(0.174533), // rotate -10 deg
        ),
      ),
    ], …

我的Flutter应用程序中有一个Text小部件,其中包含一个长文本字符串.它放置在具有固定宽度的Container中.默认情况下,文本字符串包装为多行.

但是,当我尝试将该"文本"窗口小部件插入"行"窗口小部件时,文本字符串突然切换到单行,并在右侧剪切.

什么是一个简单的方法来保持文本小部件在行内的原始多行行为？

这是我一直在使用的代码:

var container = new Container (
  child: new Row (
    children: [
      new Icon (Icons.navigate_before),
      new Text ("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."),
      new Icon (Icons.navigate_next),
    ],
  ),
  decoration: new BoxDecoration (
    backgroundColor: Colors.grey[300],
  ),
  width: 400.0,
);